以動態生成的形式綁定餘燼模型

Question

我在過去的幾周裏學習了燼寶js，並構建了一個應用程序來學習它。我處於一種需要構建動態表單的情況，該表單將綁定到燼模型。 （這個問題的最簡單的例子可以是嵌套形式，我們可以點擊添加更多鏈接/按鈕來實時添加表單，併爲它們添加值）。

但對我來說，我建立類似的調查網站，在這裏我們可以有很多選擇的選擇和用戶可以從一個可用選項之一：

什麼我迄今做了什麼？

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> 

注意這裏answer.hbs是一個組件，而這些都是從父路由調用遞歸（環路）。因此，對於2個問題，我們可以有4個文本框，每題2文本框，第一個文本框爲answer.field01和第二個文本框爲answer.field02

比方說，我有2個問題，到現在爲止，我可以看到如果它們在數據庫中不存在，那麼將在燼寶庫中構建2個答案，然後，我可以看到4個文本框在視圖中生成。但他們沒有約束力。意思是，如果我可以評價文本框，那麼在餘燼商店裏什麼都不會發生。

預期結果

當我輸入答案在文本框中，它應該answer.fieldxx正確綁定。

Answer 1

我從提取的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); 
    }); 
    },