Question

我有以下模板

{{#each photo in photos}}
    {{#view App.PhotoView}}
        <img {{bindAttr src="photo.cover_image_source" data-photo-id="photo.id"}} />
    {{/view}}
{{/each}}

现在在我的PhotoView中，如何在触发点击事件时访问与其关联的照片模型？

App.PhotoView = Ember.View.extend({
    click: function(event) {
        // how do I retrieve the model ????
    }
})

谢谢！

Answer 1

使用itemViewClass可以实现更少的代码。

{{#each photos itemViewClass="App.PhotoView"}}
  <img {{bindAttr src="cover_image_source"}} />
{{/each}}

每个视图都会自动将上下文设置为照片数组中的项目。

App.PhotoView = Ember.View.extend({
  click: function(event) {
    var photo = this.get("context");
  }
})

Answer 2

模型不会自动传递到单击函数处理程序中，因此它不能直接在视图中访问，但是您可以通过使用itemViewClass作为@BradleyPriest提到的方式获得不同的模型，或者挂钩到视图的控制器中以捕获事件。 - 这里有一个显示概念的jsfiddle - http://jsfiddle.net/intuitivepixel/AywvW/27/

编辑：我编辑了我的答案以匹配jsfiddle

模板

<script type="text/x-handlebars" data-template-name="index">
{{#each photo in photos}}
  {{#view App.PhotoView contentBinding="photo"}}
    <a {{action "photoClicked" photo}}>
      <img {{bindAttr src="photo.cover_image_source"}} />
    </a>
  {{/view}}
{{/each}}
</script>

查看

App.PhotoView = Ember.View.extend({
  content: null
});

控制器

App.IndexController = Ember.ArrayController.extend({
  photoClicked: function(event) {
    alert(event.title);
  }
});

希望有所帮助

如何在单击事件发生时检索与视图关联的模型

2 个答案: