我正在从过去几周中学习ember js,并构建了一个学习它的应用程序。我处于必须建立一个动态形式的情况下,该形式将与Ember模型结合。(此问题的最简单示例可以是嵌套的表单,我们可以单击添加更多链接/按钮以开展的添加表单,并向它们添加值(。
但对我来说,我正在建立像网站这样的调查,我们可以选择很多选项,用户可以从可用的选项中选择其中一个:
我到目前为止所做的?
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 在此处答案。HBS是一个组件,这些组件是从父路由递归(以循环为单位(的。因此,对于2个问题,我们可以有4个文本框,每个问题的2个文本框,第一个fornd.field01的文本框,第二个文本框和第二个文本框。
假设我有2个问题,到目前为止,如果数据库中还不存在,我可以看到在Ember Store中构建的2个答案,然后我可以看到在查看中生成的4个文本框。但是它们没有约束力。意思是,如果我可以重视文本框,则在Ember Store中什么也不会发生。
预期结果
当我在文本框中输入答案时,它应该与answer.fieldxx绑定。
我从 computed property
到 init()
函数提取了这些代码,现在一切都起作用:
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);
});
},