Мы все знаем, что делать что-то вроде этого плохо:
<ul>
<li>Item</li>
<li>Item</li>
... 500 more list items
</ul>
а затем...
$("ul li").bind("click", function() { ... });
Я просматривал много примеров/руководств по базовым сценариям, и, похоже, это стандартный подход к рендерингу списка элементов, основанный на коллекции моделей.
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, и он создаст только одно событие click для всего списка, но тогда я не смогу получить доступ к данным модели, соответствующим элементу с щелчком.
Какие шаблоны используют базовые разработчики для решения этой типичной проблемы?
