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

我有以下模板

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

---

谢谢

模型不会自动传递到click函数处理程序中，因此无法在视图中直接访问，但您可以通过使用@BradleyPrist提到的itemViewClass或钩住视图的控制器来捕获事件，以不同的方式获取模型。-这里是一个JSFIDLE，它展示了这个概念-

编辑：我已经编辑了我的答案以匹配JSFIDLE

模板

<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.IndexController = Ember.ArrayController.extend({
  photoClicked: function(event) {
    alert(event.title);
  }
});

---

希望对您有所帮助

使用

itemViewClass

可以用更少的代码实现这一点

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

---

谢谢这就是为什么我把数据照片id放在属性中。我希望它有点像脊梁和脊梁木偶。通常你会用完全不同的方式来做，把图像包装在{{action}}助手中，这样你就可以把模型传递给你想要调用的函数……哦，我会检查动作的内容。谢谢。您好，我尝试了代码，得到了“未捕获错误：没有处理事件”Photoclick“我不得不将photoclick函数移到一个路由器上，它甚至不是与模板匹配的路由器。很难理解为什么。此外，1.0.0-rc3中也不推荐使用this.getPath

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

{{#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");
  }
})