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/

and where are you listening to the event? I'm expecting a `this.collection.bind("reset", this.render);` or something similar somewhere — JayC, Feb 22 '12 at 04: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, Feb 22 '12 at 04: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, Feb 22 '12 at 05: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, Feb 22 '12 at 05:30
@Deeptechtons: When `Backbone.history.start()` is called, is the page at the root of whatever domain it’s being served from? — Paul D. Waite, Feb 22 '12 at 11:44
@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, Feb 22 '12 at 12:18

score 19 · Answer 1 · answered Apr 29 '13 at 12:41

19

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

answered Apr 29 '13 at 12:41

Rakan Nimer

574
5
9

Any idea why this was changed? – troelskn May 08 '13 at 11:59
3

It seems to make the code more readable and understandable, you can easily see that you're expecting the collection to do something upon fetching. An additional reason could be to lower the number of events being fired for efficiency reasons. This is just assumptions I couldn't find relevant documentation for it on the web. – Rakan Nimer May 09 '13 at 10:48

score 2 · Accepted Answer · answered May 02 '12 at 18:25

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.

score 2 · Answer 3 · edited May 23 '17 at 12:16

2

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.

edited May 23 '17 at 12:16

Community

1
1

answered Feb 22 '12 at 11:23

Oiva Eskola

949
8
13

There was no problem with the whole code somehow IIS had been messing with something. I tried with live feed from twitter json service and it worked awesome – Deeptechtons Feb 23 '12 at 04:21

score -1 · Answer 4 · answered Dec 11 '13 at 12:02

-1

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

youColloection.fetch({reset: true});

answered Dec 11 '13 at 12:02

freestyle21

29
4

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

Reference Site

4 Answers4