1

我有以下模板

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

谢谢！！

4

2 回答 2

2

这实际上可以使用更少的代码来实现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");
  }
})
于 2013-05-05T04:49:27.477 回答
1

模型不会自动传递到单击函数处理程序中，因此它不能在视图中直接访问，但是您可以通过使用 @BradleyPriest 提到的 itemViewClass 或挂钩到视图的控制器以捕获事件来以不同的方式获取模型。- 这里有一个显示该概念的 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);
  }
});

希望能帮助到你

于 2013-05-04T22:29:20.320 回答