ember.js - View 中的原始事件委托(delegate) - Ember 方式是什么？

Question

假设我们有以下 DOM 元素:

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

从一开始我们就知道这种方法不是最佳的:

$('li').on('click', function() {…});

相反，我们倾向于这样写:

$('ul').on('click', 'li', function() {…});

但是 Ember 呢？在 Ember 中， View 代表单个 DOM 元素。如果我写这个:

<ul>
  {{#each people}}
    {{#view App.PersonEntryView}}{{name}}{{/view}}
  {{/each}}
</ul>

并且 PersonEntryView 实现了 click 处理程序，我们最终会得到第一个 jQuery 示例，是吗？

我倾向于寻求最佳解决方案，所以我很好奇所谓的 Ember 事件委托(delegate)方式是什么？

我应该仅仅为了授权而为 UL 创建一个 View 吗？我可以，但是应用程序中是否有多个列表呢？

那么，伙计们，你们打算怎么做呢？

Answer 1

If I were to write .... and the PersonEntryView implemented the click handler, we would end up with the first jQuery example, or did we?

不完全是。 Ember 使用 jQuery 将所有事件委托(delegate)给根元素。当事件发生时，它会找到最近的具有处理程序的 View 。因此，当您在 PersonEntryView 上定义 click() 处理程序时，您将获得第一个示例的易于开发性和第二个示例的性能。

I tend to strive for best solutions so I'm curious what's the so-called Ember way of event delegation?

这方面的文档非常好，请查看指南 event-delegation和 event-bubbling

Should I create a view for UL just for the sake of having delegation? I could, but what about more than one list in the app?

不。只需在列表元素上定义一个点击处理程序，例如:

App.PersonEntryView = Ember.View.extend({
  click: function(event) {
    //handle event here
  }
});