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

[{
    "Id": "BVwi1",
    "Name": "Bag It",
    "AverageRating": 4.6,
    "ReleaseYear": 2010,
    "Url": "",
    "Rating": "NR"
}, {
    "Id": "BW1Ss",
    "Name": "Lost Boy: The Next Chapter",
    "AverageRating": 4.6,
    "ReleaseYear": 2009,
    "Url": "",
    "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

/

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/

• javascript
• ajax
• events
• backbone.js
• underscore.js

• 2 and where are you listening to the event? I'm expecting a this.collection.bind("reset", this.render); or something similar somewhere – JayC Commented Feb 22, 2012 at 4:51
• 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 Commented Feb 22, 2012 at 4:52
• @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 Commented Feb 22, 2012 at 5:11
• @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 Commented Feb 22, 2012 at 5:30
• 1 @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 Commented Feb 22, 2012 at 12:18

4 Answers 4

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

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.

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.

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

youColloection.fetch({reset: true});