Backbone.js : Remove an item from a collection

Question

I'm using backbone.js to implement a buddy list aka Roster. My backbone view for the Roster collection and individual rosterEntry are as follows:

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

I'm testing for now using the Firebug console and can populate the roster just fine by executing the following:

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

Adding to a collection also works fine, by executing the following in the Firebug console:

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

and the new rosterEntry is added to the Roster.

My problem is that collection.remove(5) removes from the in-memory collection, but does nothing to update the DOM.

Strangely, if I ommit the remove() function from the Roster View, all the entries in the roster are removed. If I add this method with nothing in it but a console log, it the remove method on both the Roster and RosterEntry views is called - although I'm not sure why but they are out of order!

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

if I delete the remove function from the RosterEntry model I get this error:

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

What am I doing wrong? How do I remove the element from the DOM when it is removed from the collection?

fguillen · Accepted Answer · 2012-04-17T09:41:30.910

2

I think you have a problem with the context in every event bind definition.

Try to change this:

this.model.bind('remove', this.remove);

For this:

this.model.bind('remove', this.remove, this);

I know you have tried to solve this with the bindAll, but bindAll is wrapping every call to the listed methods with the context of the actual object, but this can't do anything if you are calling the same method on other object :).

Updated

I have reading more.. looks like bindAll and the third paramater of the bind command do exactly the same. So maybe you can use the one or the other.

The because is not working the bindAll in the model.remove is because you forgot to add it to the _.bindAll(this, 'render') line, look in your code. And my suggestion fixed it because as I say both approachs do the same.

What all this is doing is assuring that the calls to the listed methods (render, remove, ... in one case or this.remove in the other) are gonna interpretate this as a reference to the actual object. This can look stupid but this is very volatile in JS.

Don't worry if you are still confused with the this thing, I have dealing with it for long and still not completely cofindent.

Maybe essais like this can help us.

edited Apr 17 '12 at 09:41

answered Apr 16 '12 at 18:33

fguillen

36,125
23
149
210

1

What do you mean I have a problem with every evenet bind definition? Not sure I really understand what bindall is for to be honest with you. I just thought all events had to be added to bindall. – reach4thelasers Apr 16 '12 at 20:49
What does the third parameter on the bind function represent? – reach4thelasers Apr 16 '12 at 22:07
this worked! Thanks! Think I've sussed out what bindall is for by reading another stackoverflow post, but why didn't bindall work? it seems to do the same thing.... also why don't I need an extra 'this' on the collection bind statement? – reach4thelasers Apr 17 '12 at 08:04
@reach4thelasers I have expanded the answer with more explanation, maybe it helps to answer your questions. – fguillen Apr 17 '12 at 09:42
Here's another backbone.js question if you're interested http://stackoverflow.com/questions/10192325/combining-serverside-mvc-with-backbone-js – reach4thelasers Apr 17 '12 at 13:36
@reach4thelasers I'm with _NickLarsen_ in that question :) – fguillen Apr 17 '12 at 16:12

score 1 · Answer 2 · answered Apr 26 '13 at 19:32

1

Have you tried the following?

this.listenTo(this.model, "remove", this.remove);

That seems to work for me and I like the way it reads a little bit better.

Link to Backbone doc

answered Apr 26 '13 at 19:32

moliveira

798
8
17

Marty Cortez · Answer 3 · 2012-04-16T19:32:51.347

-1

The remove methods on both the views are probably being called because you've bound to remove on both the model and the collection.

In RosterEntry:

 this.model.bind('remove', this.remove);

In Roster:

this.collection.bind('remove', this.remove);

edited Apr 16 '12 at 19:32

answered Apr 16 '12 at 17:57

Marty Cortez

2,325
1
17
22

Backbone.js : Remove an item from a collection

3 Answers3

Updated