Все мы знаем, что делать что-то вроде этого - плохо:
<ul>
<li>Item</li>
<li>Item</li>
... 500 more list items
</ul>
а затем ...
$("ul li").bind("click", function() { ... });
Я просмотрел множество примеров / руководств по Backbone, и следующее, похоже, является стандартным подходом к отображению списка с элементами, основанного на коллекции моделей.
var ListView = Backbone.View.extend() {
tagName: 'ul',
render: function() {
this.collection.each(function(item) {
var view = new ListItemView({model: item});
$(this.el).append(view.render().el);
});
return this;
}
});
Представление элемента списка:
var ListItemView = Backbone.View.extend() {
tagName: 'li',
events: {
'click' : 'log'
}
log : function() {
console.log(this.model.get("title"));
}
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
Если я не ошибаюсь, создание экземпляра listView с коллекцией из 500 моделей дает мне 500 событий щелчка, по одному для каждой строки. Это плохо, правда?
Я знаю, что Backbone встроил делегирование событий для событий с пространством имен:
events : {
'click li' : 'log'
}
Я полагаю, что мог бы поместить это в свой ListView, и он создал бы только одно событие щелчка для всего списка, но тогда я бы не стал не сможет получить доступ к данным модели, соответствующим выбранному элементу списка.
Какие шаблоны используют разработчики магистрали для решения этой типичной проблемы?