Controller support for nested model data - ember.js

Question

I have nested model structure like this:
App.Survey = DS.Model.extend({
name: DS.attr('string'),
questions: DS.hasMany('question', {async: true})
});
App.Question = DS.Model.extend({
questionName: DS.attr('string'),
parentQuestionId: DS.attr('number'),
position: DS.attr('number'),
questionLayoutId: DS.attr('number'),
questionLayoutName: DS.attr('string'),
childQuestions: DS.hasMany('question', {async: true})
});
And I have itemController set up to help add extra "properties" to the model content by making controller like:
App.QuestionsController = Ember.ArrayController.extend({
itemController: 'question'
});
App.QuestionController = Ember.ObjectController.extend({
needs: 'questions',
questions: Ember.computed.alias("controllers.questions"),
editMode: false,
hasChildren: function () {
return (this.get('childQuestions.length') > 0);
}.property('childQuestions'),
isBlockQuestion: function () {
return this.get('questionLayoutName') == "layout-block"
}.property('questionLayoutName')
});
So when I go to the survey, I can see list of questions in the survey. My route is setup like this :
App.SurveyRoute = Ember.Route.extend({
model: function (params) {
return this.get('store').find('survey', params.survey_id);
},
setupController: function(controller, model){
this._super(controller, model);
this.controllerFor('questions').set('model', model.get('questions'));
}
});
Now with this setup, I have the power of item controller for only root level questions but not the child level questions. I am wondering if there is a way to bind model data to appropriate controller as need be.
Here is a JSbin to demonstrate my problem: http://jsbin.com/UROCObi/2/
It might be bit too much to go into, but the concept is pretty simple. A survey can have multiple questions and a question in itself can have child questions(which in my case are called block questions). As you can see I am not able to see 3rd level questions, because its not encapsulated in any controller. Do I need to instantiate ArrayController in SurveyRoute for childQuestion for all nested level or is there other cleaner way to do things?
Thanks,
Dee

Answer 1

You can use:
{{#each questions itemController="question"}}
...
{{#each childQuestions itemController="childQuestion"}}
...
{{/each}}
{{/each}}
And the context inside each each is an instance of a QuestionController and a ChildQuestioncontroller, respectevely (I'm not sure about the naming convention).
No need to use an ArrayController, unless you also need to control the array as a whole.