Binding ember model in dynamically generated form - ember.js

Question

I am learning ember js from last couple of weeks, and building an application to learn it. I am in a situation where I have to build a dynamic form which will be bind to ember model. (the simplest example for this problem could be nested form, where we can click on add more link/button to add form on the fly, and add values to them).
But for me, I am building survey like site, where we can have lots of option to select and user can select one of the option from available one:
what I have done so far?
readAnswer: Ember.computed(function() {
return this.get('store').query('answer', { filter:
{
question_id: this.get('question.id'),
submission_id: this.get('submission.id')
}
})
}),
buildAnswer: Ember.computed(function() {
this.get('store').createRecord('answer', {
question: this.get('question'),
submission: this.get('submission')
})
}),
answer: Ember.computed(function() {
const ans = this.get('readAnswer');
console.log(`question_id: ${this.get('question.id')}, submission_id: ${this.get('submission.id')}`);
if(Ember.isEmpty(ans)) {
return this.get('buildAnswer');
} else {
return ans;
}
})
answer.hbs
<div class="row col-sm-12">
<div class="form-group">
<label>{{model.title}}</label>
<p>
{{input type="text" value=answer.field01 class="form-control" placeholder="width"}}
</p>
<p>
{{input type="text" value=answer.field02 class="form-control" placeholder="depth"}}
</p>
</div>
</div>
NOTE here answer.hbs is a component, and these are call recursively (in loop) from parent route. So for 2 questions, we can have 4 textboxes, 2 text box for each question, first textbox for answer.field01 and second textbox for answer.field02
Let's say I have 2 questions, till now, I can see 2 answers build in the ember store if they don't already exists in database and then, I can see 4 textboxes generated in view. But they are not binding. Meaning, if I can value of the textbox, nothing happens in the ember store.
Expected Result
When I input answer in the textbox, it should bind with answer.fieldxx properly.

Answer 1

I extracted those codes from computed property to init() function and everything works now:
answer: null,
init() {
this._super(...arguments);
// build without computed property
this.get('store').query('answer', { filter:
{
question_id : this.get('question.id'),
submission_id : this.get('submission.id')
}
}).then((answers) => {
if(Ember.isEmpty(answers)) {
let a = this.get('store').createRecord('answer', {
question : this.get('question'),
submission : this.get('submission')
})
this.set('answer', a); // build new object and set answer
} else {
this.set('answer', answers.get('firstObject')); // get first answer and build it (because it is always 1 record)
}
}, (reason) => {
console.log(reason);
});
},