backbone collection fetch doesn't fire reset()

Question

This is my view for a collection

var mssg = mssg || {};

mssg.MessagesView = Backbone.View.extend({

el: '#messages',

initialize: function() {
    this.collection.fetch();
    this.collection.bind('reset', this.render, this);
},

render : function() {
    this.$el.html('');
    this.collection.each(function( item ) {
        this.renderMessage( item );
    }, this );
    return this;
},

renderMessage : function( item ) {
    var messageView = new mssg.MessageView({
        model : item
    });
    this.$el.append( messageView.render().el );
}

});

this is the collection

var mssg = mssg || {};

mssg.Messages = Backbone.Collection.extend({
    model : mssg.Message,
    url : 'messages'
});

and this is how it is initialized:

var mssg = mssg || {};

$(function() {
    new mssg.MessagesView({
        collection : new mssg.Messages()
    });
});

The problem is that the render function bound to reset doesn't fire after the ajax fetch request.

If I bind it to add it works. I tried binding all to a debuggin function and it says that the sync event is called alongside the add for every item.

Solution

If you check backbone change log, you'll see that the way fetch is handled changed in 1.0:

Renamed Collection's "update" to set, for parallelism with the similar model.set(), and contrast with reset. It's now the default updating mechanism after a fetch. If you'd like to continue using "reset", pass {reset: true}

So, to trigger a reset event, you now have to use

this.collection.fetch({reset: true})

Comments

[David Fregoli]

cool thanks, it's a new app so I simply switched to the new default (set)