Primitive event delegation in a view - what's the Ember way? - ember.js

Question

Suppose we have the following DOM elements:
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Since the beginning we all know that this approach isn't optimal:
$('li').on('click', function() {…});
instead we tend to write it this way:
$('ul').on('click', 'li', function() {…});
But what about Ember? In Ember a view represents a single DOM element. If I were to write this:
<ul>
{{#each people}}
{{#view App.PersonEntryView}}{{name}}{{/view}}
{{/each}}
</ul>
and the PersonEntryView implemented the click handler, we would end up with the first jQuery example, or did we?
I tend to strive for best solutions so I'm curious what's the so-called Ember way of event delegation?
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?
So, how do you go about this, guys?

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?
Not exactly. Ember uses jQuery to delegate all events to the root element. When an event occurs it finds the nearest view that has a handler. So when you define a click() handler on PersonEntryView you get the ease-of-development of the 1st example with the performance of the 2nd.
I tend to strive for best solutions so I'm curious what's the so-called Ember way of event delegation?
The docs on this are quite good, check out the guide to
event-delegation and 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?
Nope. Just define a click handler on your list elements like:
App.PersonEntryView = Ember.View.extend({
click: function(event) {
//handle event here
}
});