Backbone reset event firing before fetch complete, and collection empty

Question

The following code makes it look as if the "reset" event on the AccItemList collection is firing before the fetch is complete. The output to the console for this is as follows...

rendering

0

fetched

0

... so "render" is called before there are any models in the collection, which is clearly wrong, but just as confusingly even in the fetch success callback there don't seem to be any models in the collection. I have also tried instantiating the AccItemList collection in the router initializer, but that didn't make any different. I'm sure I'm missing something fundamental, please help, this is driving me crazy!

$(function () {

    var AccItem = Backbone.Model.extend({
        defaults: {}
    });

    var AccItemList = Backbone.Collection.extend({
        model: AccItem,
        url: "/Dashboard/Accommodation",
        parse: function (response) {
            this.add(response.AccItems);
        }
    });

    var AccListView = Backbone.View.extend({
        el: $("#temp"),
        initialize: function () {
            _.bindAll(this, 'render', 'renderAccItem');
            this.collection = new AccItemList();
            this.collection.on('reset', this.render);
            var that = this;
            that.collection.fetch({
                success: function () {
                    console.log("fetched");
                    console.log(that.collection.models.length);
                }
            });
        },
        render: function () {
            var that = this;
            console.log("rendering");
            console.log(this.collection.models.length);
        }
    });

    var App = Backbone.Router.extend({
        routes: {
            "": "index"
        },
        index: function () {
        },
        init: function () {
            var accItemView = new AccListView();
        }
    });

    var app = new App();
    app.init();

});

Answer 1

In AccItemList.parse, you manually add the models and don't return anything but Backbone doc states

parse collection.parse(response)

parse is called by Backbone whenever a collection's models are returned by the server, in fetch. The function is passed the raw response object, and should return the array of model attributes to be added to the collection. The default implementation is a no-op, simply passing through the JSON response. Override this if you need to work with a preexisting API, or better namespace your responses. Note that afterwards, if your model class already has a parse function, it will be run against each fetched model.

Try

var AccItemList = Backbone.Collection.extend({
    model: AccItem,
    url: "/Dashboard/Accommodation",
    parse: function (response) {
        return response.AccItems;
    }
});

A Fiddle simulating your code and a modified version : http://jsfiddle.net/nikoshr/Q25dp/

The order in which the reset event and your success callback are called is dependent on the actual implementation in Backbone source. See http://documentcloud.github.com/backbone/docs/backbone.html#section-98

var success = options.success;
options.success = function(resp, status, xhr) {
    //reset call
    collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);

    //custom success call
    if (success) success(collection, resp);
};