事件委托给子视图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; 
    } 
}); 

如果我没有记错，实例化的ListView与500款集合，给了我500个点击事件，每行一个。这是不好的权利？

我知道骨干已建成事件代表团命名空间的事件：

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

我想我可以把这个在我的ListView，它只会造成整个列表点击事件，但后来我不会无法访问与点击的列表项目对应的模型数据。

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

Answer 1

德里克贝利写了一篇详细的博客文章这种两难局面，您可以点击此处查看：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; 
    } 
});