在Backbone.js中将事件委托给子视图
在Backbone.js中将事件委托给子视图
提问于 2011-12-22 20:11:47
我们都知道这样做是不好的：
<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;
}
});如果我没记错的话，用一个包含500个模型的集合实例化listView时，会产生500个单击事件，每行一个。这很糟糕，对吧？
我知道Backbone为命名空间的事件内置了事件委派：
events : {
'click li' : 'log'
}我想我可以把它放到我的ListView中，它只会为整个列表创建一次单击事件，但这样我就不能访问与单击的列表项相对应的模型数据了。
backbone开发人员使用什么模式来解决这个典型问题？
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-12-22 20:27:45
Derick Bailey写了一篇关于这个困境的详细博客文章，你可以在这里查看它：http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/
Stack Overflow用户
发布于 2011-12-22 20:19:33
您可以将实例与元素关联，如下所示：
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;
}
});Stack Overflow用户
发布于 2012-07-06 23:28:01
跟踪父视图中的子视图。然后，在添加子视图时，将其添加到散列中，并将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;
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8603705
复制相关文章
相似问题