Backbone.js Collections do not raise a "Reset" event after a fetch operation

Question

When requesting a data.json file to populate a collection that has the data below

 [{ "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" }] 

The collection does not raise a Reset event, as indicated in the documentation. I can view the request, and the answer is correct after the fetch method, but nothing happens. Below is the code for my application. The router that runs 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(); 

Collection

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

View that subscribes to 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") } }) 

Help site

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

Answer 1

I had a similar problem, I hope my answer will be useful to others. At first my data.json file data.json invalid. Then it turned out that I missed the following line of code:

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

Adding this line of code solved the problem for me.

Answer 2

You must tell Backbone to trigger reset when fetching, passing {reset: true} when fetching from Backbone 1.0

Replace:

 Theater.movies.fetch() 

FROM

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

Answer 3

There may be a problem with your selection if the collection is not populated. See this answer for how to pass an error handler to a fetch operation.

Answer 4

I have the same iusse .. and fixed:

 youColloection.fetch({reset: true});