将事件委托给Backbone.js中的子视图

Question

我们都知道做这样的事情很糟糕:

<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;
  }
});

如果我没弄错,用500个模型的集合实例化listView,给我500个点击事件,每行一个.这不好吧？

我知道Backbone内置了名称空间事件的事件委托:

events : {
  'click li' : 'log'
}

我想我可以将它放在我的ListView中,它只会为整个列表创建一个单击事件,但之后我将无法访问与单击列表项对应的模型数据.

骨干开发人员使用什么模式来解决这个典型问题？

Answer 1

Derick Bailey写了一篇关于这个困境的详细博客文章,你可以在这里查看:http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-元件/