Ember js and multilevel relationships - ember.js

Question

I'm trying to a basic app displaying a drive , its folders and files (dive hasMany folders hasMany files) ... when implemented using handlebar templates all relations loaded fine but when I created controllers and views manually I came across some issues. the reasons that I instantiated views manually are as follows. One requirement is to load a different view ( and possibly a controller) for file objects based on the attribute "type" on the file model (for example, image files should have a App.ImageFileView and videos have App.VideoFileView). also another requirement is that routs are only for drives, thus there shouldn't be a folder or a file route. the major issue that I am facing is that the folders related to the current drive are loaded fine. but when I iterate over a folder to load the related files I always get an empty set, any help is appreciated. So my question is why are files shown when using handlebars template but not when controllers and view are instantiated manually? And how can I force the relationship to be loaded?
a fiddle is located here
App = Ember.Application.create({});
// routing
App.Router.map(function() {
this.resource('drives',{path:'/'});
this.resource('drive',{path:'/:drive_id'});
});
App.DrivesRoute = Ember.Route.extend({
model: function() {
return App.Drive.find();
}
});
App.DriveRoute = Ember.Route.extend({
model: function(params) {
rval = App.Drive.find(params.drive_id);
App.set('activeDrive',rval);
return rval;
},
setupController : function(controller, model){
debugger;
var rController = App.DrivesController.create({content:model.get('folders')});
rController.populate();
}
});
// controllers
App.DrivesController = Ember.ArrayController.extend({
populate : function(){
var drives = this.content;
debugger;
drives.forEach(function(drive){
var rc = App.DriveController.create({content:drive});
rc.populate();
var rv = App.DriveView.create({controller:rc});
rv.prepare().append('#output');
});
}
})
App.DriveController = Ember.ObjectController.extend({
populate:function(){
console.log('There are '+this.content.get('files.length')+' files');
this.content.get('files').forEach(function(file){
// not reaching this point ... files.length is always 0
});
}
});
// views
App.DriveView = Ember.View.extend({
template : Ember.Handlebars.compile('{{content.name}}'),
prepare:function(){
return this;
}
});
//Models
App.Store = DS.Store.extend({
revision: 11,
adapter: DS.FixtureAdapter.create({simulateRemoteResponse: false})
});
App.Drive = DS.Model.extend({
title : DS.attr('string'),
folders : DS.hasMany('App.Folder')
});
App.Folder = DS.Model.extend({
name : DS.attr('string'),
drive : DS.belongsTo('App.Drive'),
files : DS.hasMany('App.File')
});
App.File = DS.Model.extend({
content : DS.attr('string'),
type : DS.attr('string'),
folder : DS.belongsTo('App.Folder')
});
// Fixtures
App.Drive.FIXTURES = [
{
id:1,
title : 'First Drive Title',
folders : [11,12,13]
},
{
id:2,
title: 'Second Drive Title'
},
{
id:3,
title: 'Third Drive Title'
}
];
App.Folder.FIXTURES = [
{
id:11,
name:"Docs",
files : [111,112]
},
{
id:12,
name:"Downloads"
},
{
id:13,
name:"Music"
},
];
App.File.FIXTURES = [
{
id :111,
content : 'first file content',
type : 'Text',
folder: 11
},
{
id :112,
content : 'second file content',
type : 'Image',
folder:11
},
];

Answer 1

hmm, i don't know much about fixtures, but could your problem be related to the fact that you have widgets : [111,112] in your App.Folder.FIXTURES instead of files : [111,112]?
also, your folders don't seem to have any drive id. i don't know if those are explicitly necessary, though.