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

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

3 个答案: