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

7
votes

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/

4
javascriptajaxeventsbackbone.jsunderscore.js
and where are you listening to the event? I'm expecting a this.collection.bind("reset", this.render); or something similar somewhere – JayC
Is the collection being populated, but not triggering the "reset" event? Or is it not populated at all? You haven't said how you're listening for the event or how you're checking the collection contents. – nrabinowitz
@JayC i cannot mutate the question will all these code , hence i included the link. That's the exact same thing i am trying here. Theatre.View.Movies view subs to the Reset event. – Deeptechtons
@nrabinowitz Collection is not being populated even though the json file contains the data. I am listening to the event in View that renders the Collection – Deeptechtons
@PaulD.Waite yup the page is server & i can see all the request and console messages except the collection getting reset. I am trying exact same thing that is provided in reference site. – Deeptechtons

4 Answers

19
votes

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})
2
votes

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.

2
votes

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.

-1
votes

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

youColloection.fetch({reset: true});