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

Delegating events to sub-views in Backbone.js

本文关键字：视图 事件 Backbone js      更新时间：2023-09-26

我们都知道这样做是不好的:

<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中，它只会为整个列表创建一个点击事件，但是然后我将无法访问与点击列表项对应的模型数据。

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

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

您可以将实例与元素相关联，如下所示:

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

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

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

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;
  }
});
相关文章：