Backbone.js：从集合中删除一个项目
我正在使用backbone.js来实现好友列表aka Roster。 我对名册收集和独立的骨干视图rosterEntry如下：
Slx.Roster.Views.RosterEntry = Backbone.View.extend({
tagName: "li",
className : "rosterEntry clearfix",
templateSelector: '#rosterEntryTemplate',
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.model.bind('remove', this.remove);
this.template = _.template($("#rosterEntryTemplate").html());
},
remove: function () {
debug.log("Called remove event on model");
$(this.el).remove();
},
render: function() {
var renderedContent = this.template(this.model.toJSON());
this.id = this.model.Id;
$(this.el).attr('id', "friendid-" + this.model.get("id")).html(renderedContent);
return this;
}
});
Slx.Roster.Views.Roster = Backbone.View.extend({
el: "div#roster-container",
initialize: function () {
_.bindAll(this, 'render', 'add', 'remove');
this.template = _.template($("#rosterTemplate").html());
this.collection.bind('reset', this.render);
this.collection.bind('add', this.add);
this.collection.bind('remove', this.remove);
},
add: function (rosterEntry) {
var view = new Slx.Roster.Views.RosterEntry(
{
model: rosterEntry
});
$(this.el).append(view.render().el);
},
remove: function (model) { // if I ommit this then the whole collection is removed!!
debug.log("called remomve on collection");
},
render: function () {
var $rosterEntries, collection = this.collection;
$(this.el).html(this.template({}));
$rosterEntries = this.$('#friend-list');
_.each(collection.models, function (model) {
var rosterEntryView = new Slx.Roster.Views.RosterEntry({
model: model,
collection: collection
});
$(this.el).find("ul#friend-list").append(rosterEntryView.render().el);
}, this);
return this;
}
})
我现在正在使用Firebug控制台进行测试，并且可以通过执行以下操作来填充名单：
collection = new Slx.Roster.Collection
view = new Slx.Roster.Views.Roster({collection:collection})
collection.fetch()
通过在Firebug控制台中执行以下操作，添加到集合中也可以正常工作：
collection.add(new Slx.Roster.Model({username:"mickeymouse"})
并将新的rosterEntry添加到名册中。
我的问题是， collection.remove(5)从内存集合中删除，但没有更新DOM。
奇怪的是，如果我从名册视图中remove()函数，名单中的所有条目都将被删除。 如果我在这个方法中没有任何东西而是添加了一个控制台日志，它就会调用Roster和RosterEntry视图上的remove方法 - 虽然我不确定为什么，但是它们是无序的！
["Called remove event on model"]
["called remomve on collection"]
如果我从RosterEntry模型中删除remove函数，我得到这个错误：
TypeError: this.$el is undefined
this.$el.remove();
我究竟做错了什么？ 从集合中删除元素时，如何从元素中删除元素？
我认为你在每个事件绑定定义中的context都有问题。
尝试改变这一点：
this.model.bind('remove', this.remove);
为了这：
this.model.bind('remove', this.remove, this);
我知道你已经试图用bindAll来解决这个bindAll ，但是bindAll用实际对象的上下文来封装列表方法的每一个调用，但是如果你正在对其他对象调用同样的方法，这个方法就无能为力了:)。
更新
我阅读更多..看起来像bindAll和bind命令的第三个参数完全相同。 所以也许你可以使用这个或那个。
因为没有使用bindAll中的model.remove ，因为您忘记将其添加到_.bindAll(this, 'render')行中，请查看您的代码。 我的建议解决了这个问题，因为我说这两种方法都是一样的。
这一切都做的是确保该所列出的方法调用（ render, remove, ...在一个案件或this.remove的除外）都打算interpretate this为实际对象的引用。 这看起来愚蠢，但是this是在JS非常不稳定。
如果你仍然this件事感到困惑，不要担心，我已经处理了很长时间，但仍然不完全是共同的。
也许像这样的essais可以帮助我们。
你尝试过以下吗？
this.listenTo(this.model, "remove", this.remove);
这似乎对我有用，我喜欢它读得更好一些。
链接到骨干文档
这两个视图的删除方法可能会被调用，因为你必须删除模型和集合。
在RosterEntry中：
this.model.bind('remove', this.remove);
名册中：
this.collection.bind('remove', this.remove);