動的に生成されたフォームのバインダーemberモデル

Question

私はここ2週間から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> 

注ここ成分でありanswer.hbs、これらは親ルートから（ループ内で）再帰呼び出しされています。だから、2つの質問のために、私たちは今まで、私が見ることができる、のは、私は2つの質問を持っているとしましょう4つのテキストボックス、各質問のための2テキストボックス、answer.field02

ためanswer.field01と第二テキストボックスの最初のテキストボックスを持つことができますデータベースにまだ存在していない場合はEmberストアに2つの回答が作成され、次に4つのテキストボックスが表示されます。しかし、彼らは拘束力がありません。意味、もし私がテキストボックスの価値を得ることができれば、何もemberストアでは起こらない。

私はテキストボックスに入力答え、それはanswer.fieldxx適切に結合するはず

期待される結果。

Answer 1

私はcomputed propertyinit()に関数からこれらのコードを抽出し、すべてが動作するようになりました：

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); 
    }); 
    }, 

を