将事件委托给 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-element/

Answer 2

您可以将实例与元素关联起来，如下所示：

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

log: function( e ) {
var elm = e.currentTarget //Same as `this` in normally bound jQuery event


jQuery.data( elm, "viewInstance" ).log( e );
},

然后：

var ListItemView = Backbone.View.extend() {

  tagName: 'li',

  log : function() {
    console.log(this.model.get("title");
  }

  render: function() {
        //Associate the element with the instance
    $(this.el).html(this.template(this.model.toJSON())).data( "viewInstance", this );
    return this;
  }
});

Answer 3

从父视图中跟踪子视图。然后，在添加子视图时，将其添加到哈希中，并将 cid 添加到子视图的 el 中。这种方式有一个指向子视图的指针，并且可以对其模型执行操作等...

我没有测试下面的确切代码，所以这可能在一两个地方是错误的，但我已经测试了这个一般原则。我还省略了 listitemview 代码。

var ListView = Backbone.View.extend() {
  subViews: {},
  tagName: 'ul',
  events: {
    'click li' : 'clickItem'
  },
  clickItem: function(event){
     var id = event.currentTarget.cid;
     var subView = this.subViews[id];


  },
  render: function() {

    this.collection.each(function(item) {
      var view = new ListItemView({model: item});
      this.subViews[view.cid] = view;
      subEl = view.render().el;
      subEl.cid = view.cid;
      $(this.el).append(subEl);
    });
    return this;
  }
});