ノックアウト縛りリストの項目を更新する

Question

私は質問のリストを持っており、各質問には回答のリストがあり、私は一度に1つの質問を表示するためにノックアウトを使用しています。私がやっていることは、完全なリストでモデルを設定し、currentQuestionプロパティを観測可能にすることです。各質問の答えが得られたら、次の質問にこれを増やします。問題は、ユーザーがそれを動かしたときに問題のデータを変更しなければならないということですが、回答を観察可能にする方法を理解できません。

私はjsfiddleをまとめました。ユーザーが回答をクリックすると、回答テキストを「変更済み」に変更します。

クリックハンドラがその値を変更したときにこれがUIに反映されるようにAnswerTextを観察可能にするにはどうすればよいですか。

私が間違っていると思うすべてのアイデアが評価されます。

jsfiddleコード以下の場合：

<div class="top"> 
    <div data-bind="foreach: currentQuestion().Answers"> 
    <div data-bind="click: $root.answerClicked"> 
     <div data-bind="text: AnswerText"></div> 
    </div> 
    </div> 
</div> 


function MyVM() { 
    var self = this; 

    this.session = { 
    Questions: [ 
     { 
     QuestionText: "Q1", 
     Answers: [ 
      { 
      AnswerText: "Q1A1" 
      }, 
      { 
      AnswerText: "Q1A2" 
      } 
     ] 
     }, 
     { 
     QuestionText: "Q2", 
     Answers: [ 
      { 
      AnswerText: "Q2A1" 
      }, 
      { 
      AnswerText: "Q2A2" 
      } 
     ] 
     } 
     ] 
    }; 

    this.currentQuestion = ko.observable(); 
    this.currentQuestion(self.session.Questions[1]); 

    this.answerClicked = function (selectedAnswer, event) { 
    alert('hello'); 
    selectedAnswer.AnswerText = 'modified1'; 
    selectedAnswer.AnswerText('modified'); 
    }; 
} 

var model = new MyVM(); 
ko.applyBindings(model); 

Answer 1

現在、あなたは、静的な文字列にUIを結合しています。 UIに変更を反映させるためには、指定したとおりに文字列をオブザーバブルにラップする必要があります。そうすれば、正しいトラックのように聞こえます。あなたは、各回答オブジェクトのオブザーバブルを使用するだけです。

Answers: [ 
     { 
     AnswerText: ko.observable("Q2A1") 
     }, 
     { 
     AnswerText: ko.observable("Q2A2") 
     } 
    ] 

は、次にクリック機能であなたはそれが観察を交換した値ではなく、観察に割り当てられている2行目のみを使用することになる最初の代入演算子を取り除くしたいと思うでしょう。

this.answerClicked = function (selectedAnswer, event) { 
    alert('hello'); 
    //selectedAnswer.AnswerText = 'modified1'; 
    selectedAnswer.AnswerText('modified'); 
    };