binding - Dropdrownのノックアウト双方向バインディング

Question

観察可能な配列からドロップダウンの値をバインドしているときに、問題に直面しています。

• モデル

  function question(item)
  {
      var self = this;
      self.questionId = ko.observable(item.questionId || "");
      self.position = ko.observable(item.position || "");
      self.position.subscribe(function (data) {
         // Some Logic
      }, this, 'beforeChange');    
  
      api.position.subscribe(function (data) {
      // Some Logic
      }
  }
  

• モデルを見る

  function viewmodel(item)
  {
      var self = this;
      self.questionList = ko.observableArray([]);
      self.questionEntity = ko.observable(new question(item)); 
      // initially Item will be blank
      self.addQuestion = function(data)
      {
          data.position(self.questionList().length + 1);
          self.questionList.push(data);
      }
  }
  

• 意見

  <div>
     question Id : <input type="text" data-bind="value: questionEntity().questionId "  >
     <button data-bind='click: $root.addquestion'>Add Question</button>
  </div>
  
  <table>
     <tbody data-bind='foreach: questionList '>
     question Id : <span data-bind='text:questionId' ></span>
     position : 
        <select data-bind='options: $root.positionList,optionsText: "id",optionsValue: "id" ,value: position'></select>
     </tbody>
   </table>
  

• 問題

ポップアップ div( addQuestion) が 1 つあり、質問を追加します。そして、私はその質問を観察可能な Array( questionList)に追加し続けています

最初の質問を追加すると、監視可能な配列の値は

questionId | Position
1          | 1

2番目のレコードを追加すると

questionId | Position
1          | 1
2          | 2

3 番目のレコードを追加すると、最後のレコードを除くすべての前のレコードの POSITION 値 (値はドロップダウンにバインドされます) が 1 にリセットされます

questionId | Position
1          | 1
2          | 1
3          | 3

4番目のレコード

questionId | Position
1          | 1
2          | 1
3          | 1
4          | 4

デバッグ後、ドロップダウンとの双方向バインディングの問題を発見しました

<select data-bind='options: $root.positionList,optionsText: "id",optionsValue: "id" ,value: position'></select>

上記のコードで、以下のようにバインディング（一方向）を変更すると、正常に動作します

<select data-bind='options: $root.positionList,optionsText: "id",optionsValue: "id" ,value: position()'></select>

しかし、ドロップダウンのイベントをサブスクライブする必要があります。