Делегирование событий во вложенные представления в Backbone.js

Все мы знаем, что делать что-то вроде этого - плохо:

<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, и он создал бы только одно событие щелчка для всего списка, но тогда я бы не стал не сможет получить доступ к данным модели, соответствующим выбранному элементу списка.

Какие шаблоны используют разработчики магистрали для решения этой типичной проблемы?

17
задан Daniel 22 December 2011 в 12:18
поделиться