EmberJS - 处理视图内多个元素的事件答案

【问题标题】：EmberJS - Handling events for multiple elements inside a viewEmberJS - 处理视图内多个元素的事件
【发布时间】：2014-03-17 07:54:46
【问题描述】：

我有一个名为“projects”的 Handlebars 模板和一个名为“ProjectsView”的视图，它引用了具有templateName 属性的模板。

此项目模板从模型生成divs 列表，每个 div 都需要在单击时展开。

{{#each project in model}}
    <div class="project">
        <img src="{{project.logo}}" /> <!-- Execute a different logic for the click event  -->
        <h4>{{project.title}}</h4> <!-- Execute a different logic for this click
{{/each}}

我最初使用了action 帮助器，并在ProjectsController 的actions 哈希中添加了一个相关方法。但是，action 正在列表中的所有divs 上执行，而不仅仅是单击的那个。

以前的 Ember 版本曾经为 action 提供 context 参数，但现在不再如此。事实证明，处理DOM 事件的推荐方法是在如下视图中。

App.ProjectsView = Ember.View.extend({
    templateName: 'projects',
    click: function(event) {
        // Do something with the event
    }
})

但是，在单击处理程序中编写一堆if's 来查找单击事件是否在image 或h4 上触发并采取相应措施是不对的。这是处理事件的正确方法还是我做错了？

【问题讨论】：

我认为您应该让控制器确定触发事件的元素并将操作限制在该元素。您是否将事件从视图发送到控制器？
@Anthony 不，我现在会调查一下。但这不会类似于我已经在做的事情吗？我们没有在视图中测试事件目标，而是将此逻辑移至控制器。
是的，但不同之处在于不是为每个 div 设置一个事件侦听器，而是让控制器仅对触发事件的元素应用事件操作。它将使用反映源的事件对象的属性，以便将操作应用于与侦听器相关的所有元素。
@Anthony 假设我有一个 div，还有一些其他元素嵌套在这个 div 中。我想将一个点击事件监听器附加到这个包含的 div 上。如果我理解正确，您是说我应该在视图中使用单击处理程序，然后将此事件转发给相关控制器并在那里处理它。但是这个点击事件将在点击视图内的任何元素时触发，因为我只想听这个特定 div 上的点击事件。目前，我能想到的唯一方法是使用 event.target 过滤事件。对吗？
对，由于该事件操作的每个 div 的模型是相同的，因此您可以找到任何 div 级别操作的 project 类目标的父级。将操作包含在该 div 中（基本上与您所说的内置“上下文”的想法相同）

标签： javascript jquery ember.js

【解决方案1】：

您可以改为将App.ProjectsView 用作CollectionView，并将每个项目作为其子视图。

App.ProjectsView = Ember.View.extend({
    templateName: 'projects',
    itemViewClass: 'App.ProjectView'
})

您可以使用target=view option in action helper 直接处理子视图中的操作。

由于您想要执行与 DOM 相关的任务（展开/折叠），处理视图中的操作会有所帮助，因为您可以使用 this.$() 获取视图的 jQuery 对象。

【讨论】：

感谢您的想法。现在就试试。