Ember.js: programmatically load hasmany relationship -

disclamer: started using ember.js few days ago

suppose having these 2 models:

app.question = ds.model.extend({     text: ds.attr('string'),     answers: ds.hasmany('answer', {async: true}) });  app.answer = ds.model.extend({     question: ds.belongsto('question'),     text: ds.attr('string') }); 

for reasons got json (without "answers" list)

{     ...     "questions": [         {"id": 1, "text": "foo?"}, ...     ] } 

in template want load , show answers if explicitly needed

{{#each questions itemcontroller="question"}}     <div class="answer-wrapper">         {{text}}         <button {{action "loadanswers"}}>load answers</button>         <ul>             {{#each answers}}                 <li>{{text}}</li>             {{/each}}         </ul>     </div> {{/each}} 

how can in controller's loadanswer action?

app.questioncontroller = ember.objectcontroller.extend({     ...      actions: {         loadanswers: function() {             // programatically load answers         }     } }); 

workaround: can changing attribute in template

{{#each loadedanswers}}     <li>{{text}}</li> {{/each}} 

and defining correctly action

app.questioncontroller = ember.objectcontroller.extend({     ...      actions: {         loadanswers: function() {             // or loaded ajax...             this.set("loadedanswers", [                 {id: 1, text: "foo"},                 {id: 2, text: "bar"}             ]);         }     } }); 

you can wrap portion of template if statement. async relationship won't fetched unless it's requested.

controller

app.questioncontroller = ember.objectcontroller.extend({   showanswers: false,     ...      actions: {         loadanswers: function() {           this.set('showanswers', true);         }     } }); 

template

{{#if showanswers}}    <ul>        {{#each answers}}            <li>{{text}}</li>        {{/each}}    </ul> {{/if}}