Controller support for nested model data

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

edpaez edpaez · Accepted Answer · 2013-12-11T22:02:57

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.

Controller support for nested model data

1 Answers