Backbone relational toJSON doesn't render all attributes

Question

I've read this and this question already but it didn't help. I called fetchRelated this way:

  initialize: function(){
           Artist.fetchRelated(
                'albums',
                {success: this.render}
           );
  },

  render: function(){                                                                   
           this.model.get('albums').each(function(album){             
               console.log(album);                                    
               console.log(album.toJSON());                           
               console.log(album.get('title'));                       
          });                                                        
          $(this.el).html(this.template({                            
              current_user: App.current_user.toJSON(),          
              artist: this.model.toJSON(),                           
              albums: this.model.get('albums'),                      
          }));                                                       

          return this;
      },

The first console.log(album) returns a valid album model with all its attributes correctly but the next call of log with the toJSON function doesn't. It just returns the id. So, when I try to retrieve the title of an album in the next log it returns undefined.

In addition it tells me I can't call toJSON() to the artist in the template call, because it is undefined, even though, I just used it to get the albums...

I'm sure my problem here is with the callback hell I'm still not used to, but I don't have a clue of how to fix it.

Edit 1:

console.log(album) response is something like this for each album in the collection:

_changing: false
_events: Object
_isInitialized: true
_pending: false
_permitsUsed: 0
_previousAttributes: Object
_queue: Backbone.BlockingQueue
_relations: Array[2]
attributes: Object
    artist: child
    description: "asdasd"
    id: 1
    image: ""
    release_year: 1950
    resource_uri: "/albums/1"
    songs: child
    title: "asdasd"
changed: Object
cid: "c8"
collection: child
id: 1
__proto__: Surrogate

Edit 2:

I've tried changing the toJSON function provided from backbone-relational, but I don't get why doing such a thing should fix my problem since I have other models and this function works properly without any overriding.

I tried returning _.clone(this.attributes) from my own toJSON function, since console.log(this.attributes) was giving a correct response but for some reason it returns the same.

artist: Object
id: 1
songs: Array[0]
__proto__: Object

Here is how my relations look.

  relations: [{
       type: Backbone.HasMany,
       key: 'songs',
       relatedModel: SongModel,
       collectionType: Songs,
       reverseRelation:{
           key: 'album'
       }
   }],

Could you post the result of the `console.log(album);` call? — Akos K, Mar 18 '13 at 21:58
You have fallen to the js binding gotcha. In your `initialize` -function, the first thing you need to do is call `_.bindAll(this)` to bind all the view methods to the correct context of `this`. — jakee, Mar 19 '13 at 15:27
If your ovservations are right, then `console.log` function or `album.toJSON` function messed up your data (for example you can 'override' `toJSON` function, in our project we do it quite often) try to debug it. And as previous author noticed, bind functions that you passing as callbacks, in your case it's `_.bindAll(this, 'render');` — Andrew, Mar 19 '13 at 18:45
Well using _.bindAll(this, 'render') didn't solved it and if we need to call it every view, then why it isn't a default functionality? — Nocturn, Mar 20 '13 at 16:29
You don't have to call it in every view, you only need to call it when using function with different context (usually happen's in callbacks). Again if your observations are correct, try to `console.log` album 3 times instead of calling `toJSON` and `get('title')` if it returns the same value then your `toJSON` function is changing album's values and you need to correct it. — Andrew, Mar 20 '13 at 17:43

score 0 · Answer 1 · answered Sep 27 '13 at 15:39

I'm stuck in the same problem , i found that you can access the attributes using

render: function(){                                                                   
    this.model.get('albums').each(function(album){   
        album.fetch({
            success: function(fetchedAlbum) {
                console.log(fetchedAlbum.toJSON());
            }
        });
    });
});

this will print the fetched albums with the fetched relation...

I don't consider this as a solution since the main purpose of using backbone relational is to avoid such hassle.

will update this if I find a solution :D real solution

Backbone relational toJSON doesn't render all attributes

1 Answers1