Backbone.js : Supprimer un élément d'une collection

Je suis en utilisant backbone.js pour mettre en œuvre une liste de contacts aka Liste. Ma colonne vertébrale affichage de la Liste de la collecte et de l'individu rosterEntry sont comme suit:

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

Je suis en essais pour l'instant à l'aide de la console de Firebug et peut remplir la liste de l'amende juste en exécutant la commande suivante:

collection = new Slx.Roster.Collection
view = new Slx.Roster.Views.Roster({collection:collection})
collection.fetch()

Ajouter à une collection fonctionne aussi très bien, en exécutant la commande suivante dans la console de Firebug:

collection.add(new Slx.Roster.Model({username:"mickeymouse"})

et la nouvelle rosterEntry est ajouté à la Liste.

Mon problème est que collection.remove(5) supprime de la collection en mémoire, mais ne fait rien pour mettre à jour le DOM.

Étrangement, si je omettre l' remove() fonction à partir de la Liste d'Affichage, toutes les entrées de la liste sont supprimés. Si j'ajoute cette méthode avec rien, mais un journal de la console, c'est la méthode remove sur le Roster et RosterEntry points de vue s'appelle - bien que je ne suis pas sûr pourquoi, mais ils sont hors de l'ordre!

["Called remove event on model"]
["called remomve on collection"]

si je supprime la fonction de suppression de la RosterEntry modèle, j'obtiens cette erreur:

TypeError: this.$el is undefined
this.$el.remove();

Ce que je fais mal? Comment faire pour supprimer l'élément du DOM lorsqu'il est retiré de la collection?

OriginalL'auteur reach4thelasers | 2012-04-16