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

Posted 2023-02-26

【中文标题】单击事件发生时如何检索与视图关联的模型

【英文标题】：How to retrieve model associated to view when click event happens

【发布时间】：2013-05-04 21:56:59

【问题描述】：

我有以下模板

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

谢谢！！

【参考方案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");
  
)

【参考方案2】：

模型不会自动传递到点击函数处理程序中，因此它不能在视图中直接访问，但是您可以通过使用 @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);
  
);

希望对你有帮助

【讨论】：

谢谢。这就是我放置 data-photo-id attr 的原因。我希望它有点像 Backbone 和 Backbone Marionette。让它更容易。

通常您会以完全不同的方式执行此操作，将图像包装在 action 帮助器中，以便您可以将模型传递给您要调用的函数...

哦，我会检​​查动作的东西。谢谢。

嗨，我尝试了代码并收到“未捕获错误：没有处理事件“photoClicked”。 '

我不得不将 photoClicked 功能移动到一个路由器，这甚至不是匹配模板的路由器。很难理解为什么。 this.getPath 在 1.0.0-rc3 中也被弃用了