Ember.js belongsTo relationship undefined but hasMany array populated - ember.js

Question

Using ember-data with Django REST adapter. Having trouble setting content of controllers based on the model received's relationships in setupController hooks
I put break points in and they went in this order:
ArtistRoute.model
ArtistTrackRoute.model
ArtistRoute.setupController
ArtistTrackRoute.setupController
Please see comments in those functions for more info / questions.
A track's primary artist is track -> belongsTo -> album -> belongsTo -> artist
Artists:
artist -> hasMany -> albums
Album
album -> belongsTo -> artist
album -> hasMany -> tracks
Track
track -> belongsTo -> album
I've checked my api output, and the resource link is definitely there.
Here's my models:
App.Album = DS.Model.extend({
'title' : DS.attr('string'),
'slug' : DS.attr('string'),
'year' : DS.attr('number'),
'type' : DS.attr('string'),
'image' : DS.attr('string'),
'genre' : DS.attr('string'),
'tracks' : DS.hasMany('App.Track'),
'artist' : DS.belongsTo('App.Artist')
});
App.Track = DS.Model.extend({
'title' : DS.attr('string'),
'slug' : DS.attr('string'),
'artists_titles' : DS.attr('string'),
'artists_ids' : DS.attr('string'),
'artists_slugs' : DS.attr('string'),
'year' : DS.attr('number'),
'genre' : DS.attr('string'),
'label' : DS.belongsTo('App.Label'),
'album' : DS.belongsTo('App.Album'),
'creator' : DS.attr('number'),
'created' : DS.attr('date'),
'modified' : DS.attr('date'),
});
App.Artist = DS.Model.extend({
'title' : DS.attr('string'),
'image' : DS.attr('string'),
'slug' : DS.attr('string'),
'genre' : DS.attr('string'),
'creator' : DS.attr('number'),
'created' : DS.attr('date'),
'modified' : DS.attr('date'),
'absoluteUrl' : DS.attr('string'),
'resourceUri' : DS.attr('string'),
'albums' : DS.hasMany('App.Album'),
'getImageURL' : function() {
return (this.get('image')) ? '/static/img/' + this.get('image') + '.jpg' : false;
}.property('image')
});
Here's my Routes:
App.ArtistRoute = Ember.Route.extend({
'model' : function(params) {
// here first
return App.Artist.find(params.artist_id);
},
'serialize' : function(model) {
"use strict";
return {
'artist_id' : model.get('id'),
'artist_slug' : model.get('slug')
};
},
'setupController' : function(controller, artist) {
// here third...
// I inspected artist._data
// artist._data.hasMany.albums = [1]
this.controllerFor('artist').set('content', artist);
}
});
App.ArtistTrackRoute = Ember.Route.extend({
'model' : function(params) {
// here second
return App.Track.find(params.track_id);
},
'serialize' : function(model) {
"use strict";
return {
'track_id' : model.get('id'),
'track_slug' : model.get('slug')
}
},
'setupController' : function(controller, track) {
// here fourth... I inspected the track data object
// track._data.belongsTo.album == undefined
// what I'm trying to achieve here is to set the album
// controller based on the belongsTo relationship
// this.controllerFor('album').set('content', track.get('album'))
this.controllerFor('track').set('content', track);
}
});
Moreover, when breakpointing in ArtistAlbumRoute.setupController, I noticed that album._data.hasMany.tracks == [1]
But album._data.belongsTo.artist == undefined.... wtf?!?!?!
I'm still having a hard time wrapping my head around Ember so any extra advice is much appreciated. Thanks!
Additionally, after the page has loaded and I open console, what would I type in to access the controllers to see what is set?

Answer 1

It turned out to have everything to do with my Tastypie Resource setup...
https://github.com/escalant3/ember-data-tastypie-adapter/issues/18
My TrackResource looked like this:
class TrackResource(ModelResource):
album = fields.ToOneField('samped.api.resources.AlbumResource', 'album')
class Meta:
queryset = Track.objects.all()
All I had to do was add "_id" to the album
class TrackResource(ModelResource):
album_id = fields.ToOneField('samped.api.resources.AlbumResource', 'album')
class Meta:
queryset = Track.objects.all()
Then I was able to do:
App.ArtistTrackRoute = Ember.Route.extend({
'model' : function(params) {
return App.Track.find(params.track_id);
},
'serialize' : function(model) {
"use strict";
return {
'track_id' : model.get('id'),
'track_slug' : model.get('slug')
}
},
'setupController' : function(controller, track) {
this.controllerFor('track').set('content', track);
this.controllerFor('album').set('content', track.get('album'))
}
});