Backbone.js Collections do not invoke “Reset” event after fetch operation

Question

When requesting for data.json file for populating collection which has below data

[{
    "Id": "BVwi1",
    "Name": "Bag It",
    "AverageRating": 4.6,
    "ReleaseYear": 2010,
    "Url": "http://www.netflix.com/Movie/Bag_It/70153545",
    "Rating": "NR"
}, {
    "Id": "BW1Ss",
    "Name": "Lost Boy: The Next Chapter",
    "AverageRating": 4.6,
    "ReleaseYear": 2009,
    "Url": "http://www.netflix.com/Movie/Lost_Boy_The_Next_Chapter/70171826",
    "Rating": "NR"
}]

Collection does not invoke the "Reset" event as the documentation says it should. I can view the request and response are correct after the fetch method but nothing happens. Below is the code for my app. Router that start's everything

Theater.Router = Backbone.Router.extend({
    routes: {
        "": "defaultRoute"
    },

    defaultRoute: function () {
        Theater.movies = new Theater.Collections.Movies()
        new Theater.Views.Movies({
            collection: Theater.movies
        });
        Theater.movies.fetch();
    }
})
var appRouter = new Theater.Router();
Backbone.history.start();

the Collection

Theater.Collections.Movies = Backbone.Collection.extend({
    model: Theater.Models.Movie,
    url: "scripts/data/data.json",
    initialize: function () {}
});

View that subscribes to the reset event

Theater.Views.Movies = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, "render", "addOne");
        this.collection.bind("reset", this.render);
        this.collection.bind("add", this.addOne);
    },

    render: function(){
        console.log("render")
        console.log(this.collection.length);
    },

    addOne: function (model) {
        console.log("addOne")
    }
})

Reference Site

http://bardevblog.wordpress.com/2012/01/16/understanding-backbone-js-simple-example/

Answer 1

I had a similar issue, I hope my reply will be of any use to others. At first my data.json file was not valid. Then it turned out that I overlooked the following line of code:

Theater.Models.Movie = Backbone.Model.extend({}

Adding this line of code resolved the issue for me.

Answer 2

You should tell Backbone to fire the reset on fetch by passing {reset: true} when fetching as of Backbone 1.0

Replace :

Theater.movies.fetch()

With

Theater.movies.fetch({reset :true})

Answer 3

There might be a problem with your fetch if the collection is not being populated. See this answer to see how to pass an error handler into the fetch operation.

Answer 4

I have the same iusse.. and fixed it by:

youColloection.fetch({reset: true});