我有一个由用户视图(列表)处理的用户集合。单个元素,模型,作为 UserView 处理。
当我现在获取一个新的 UserCollection(其他 url)而不是集合对象本身更新(包含新的用户模型)时,但 html 列表仍然存在。
列表显示:
var ContactsView = Backbone.View.extend({
tagName: "ul",
className: "contacts unstyled",
events: {
},
initialize: function() {
this.collection = new UserCollection();
this.collection.bind('add', this.addContact, this);
this.collection.bind('remove', this.removeContact, this); // not getting called
this.collection.bind('reset', this.listContacts, this);
this.collection.fetch();
},
render: function() {
this.$el.html();
return this;
},
listContacts: function(contacts) {
contacts.each(function(contact) {
this.$el.append(new ContactView({ model: contact }).render().el);
}.bind(this));
},
addContact: function(contact) {
this.$el.append(new ContactView({ model: contact }).render().el);
},
// this is not getting executed
removeContact: function(contact) {
console.log(["removeContact fired"]);
contact.unset();
}
});
项目视图
var ContactView = Backbone.View.extend({
tagName: "li",
className: "contact",
template: _.template(ContactTemplate),
events: {
"mouseenter li.contact": "expandOptions"
, "mouseleave li.contact": "collapseOptions"
, "click": "removeContact"
},
initialize: function() {
this.model.bind('change', this.render, this);
this.model.bind('remove', this.remove, this);
this.model.bind('destroy', this.remove, this);
this.model.bind('unset', this.remove, this);
},
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
},
expandOptions: function() {
},
collapseOptions: function() {
},
removeContact: function(e) {
this.model.destroy();
}
});
那么当 Backbone.Collection 在内部删除项目(例如 fetch)时会触发哪个事件,我该如何收听呢?