Backbone.js toJSON() not including attributes

Question

I really can't wrap my head around this one. For some reason, (and I suspect it has something to do with asynchronous requests) my model attribute is not being converted properly using the toJSON() function. FWIW, I'm attempting to do lazy loading with django-relational fetchRelated().

Here's where I made the fetchRelated() request and create a new view.

$.when(usermodel.fetchRelated("movies")).then(function(){
        var newview = new UserMovieList({model: usermodel});
        newview.render(); 
    });

And this calls up the following render function:

render: function(){
        $(this.el).html(this.template({}));

        var usermodel = this.model; 

        var wrapper = $(".movies");
            var recipes = usermodel.get("movies");
            movies.each(function(movie){
                var movie_item = new UserMovieListItem({
                    model:movie
                });
                movie_item.render(); 
                wrapper.append(movie_item.el);
            });
        return this;

Which then calls the UserMovieListItem render function:

render: function(){
        console.log("movies to JSONify", this.model.attributes);
console.log("movies JSONified", this.model.toJSON());
        $(this.el).html(this.template(this.model.toJSON()));
        return this;

Here's the kicker. The first console.log (this.model.attributes) displays all of the attributes as they should be. It seems perfectly fine. But (this.model.toJSON()) only returns the URI and id attributes which were provided before the fetchRelated(). What the heck is going on here? If I bind this.model in UserMovieListItem with 'change' to render, then it will render, but after half a second or so... },

My User model is defined as such:

window.User = Backbone.RelationalModel.extend({
    urlRoot: '/movie/api/v1/users/',
    relations: [{
        type: Backbone.HasMany,
        key: 'movies',
        relatedModel: 'Movie',
        collectionType: 'UserMovieCollection',
        reverseRelation: {
            key: 'user',
            includeInJSON: 'id'
        }
    }],
    select: function(){
        var model = this; 
        model.set({selected: true});
    }
});

Could you add definition for `usermodel` and JSON response for `usermodel.fetchRelated("recipes")` by the way check if `$.when(usermodel.fetchRelated("recipes"))` is setting the model attributes — Deeptechtons, May 25 '12 at 06:49
I just realized I had a typo -- though this doesn't affect the code. I will update my question, too. — bento, May 25 '12 at 07:01
And if I do a console.log of usermodel in the .then(function(){}); it shows that the attributes have been applied and updated to the relevant movie models. — bento, May 25 '12 at 07:07

score 1 · Accepted Answer · answered May 25 '12 at 09:21

1

fetchRelated returns array of jqXHR objects, and you need to use it with $.when this way:

$.when.apply(null, usermodel.fetchRelated("movies")).then(function(){
    var newview = new UserMovieList({model: usermodel});
    newview.render(); 
});

answered May 25 '12 at 09:21

rinat.io

3,168
2
21
25

Backbone.js toJSON() not including attributes

1 Answers1

Linked