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
Vous devez vous connecter pour publier un commentaire.
Je pense que vous avez un problème avec le
context
dans tous les cas lier définition.Essayer de changer cela:
Pour cela:
Je sais que vous avez essayé de régler cela avec le
bindAll
, maisbindAll
est d'emballage de chaque appel de la liste des méthodes avec le contexte de l'objet réel, mais cela ne peut pas faire n'importe quoi, si vous appelez la même méthode sur un autre objet :).Mis à jour
J'ai de la lecture en plus.. ressemble
bindAll
et la troisième paramater de labind
commande de faire exactement la même chose. Alors peut-être vous pouvez utiliser l'un ou l'autre.La parce que n'est pas de travail le
bindAll
dans lemodel.remove
est parce que vous avez oublié de l'ajouter à la_.bindAll(this, 'render')
ligne, regardez dans votre code. Et ma suggestion de corrigé parce que comme je l'ai dit les deux approches en faire de même.Ce que tout cela est en train de faire est de s assurer que les appels de la liste des méthodes (
render, remove, ...
dans un cas outhis.remove
dans l'autre) vont interprétons maintenantthis
comme une référence à l'objet réel. Cela peut paraître stupide, maisthis
est très volatils en JS.Ne vous inquiétez pas si vous êtes encore confus à la
this
chose, j'ai affaire avec elle pour longtemps et encore pas complètement cofindent.Peut-être essais comme ça peut nous aider.
Quel est le troisième paramètre de la fonction de liaison représentent?
cela a fonctionné! Merci! Pense que j'ai sussed ce bindall est pour par la lecture d'un autre stackoverflow post, mais pourquoi ne pas bindall travail? il semble faire la même chose.... aussi pourquoi n'ai-je pas besoin d'un supplément de " ce " sur la collecte de lier déclaration?
J'ai élargi la réponse avec plus d'explication, peut-être qu'il aide à répondre à vos questions.
Exceptionnel! Merci!
OriginalL'auteur fguillen
Avez-vous essayé le suivant?
Qui semble fonctionner pour moi et j'aime la façon dont il lit un peu mieux.
Lien vers épine Dorsale doc
OriginalL'auteur moliveira
Les méthodes de suppression sur les deux points de vue sont probablement d'être appelé parce que vous avez lié à supprimer à la fois le modèle et la collection.
Dans RosterEntry:
Dans La Liste:
OriginalL'auteur Marty Cortez