選択リストの初期化時にノックアウトイベントが発生する

Question

ノックアウト選択リストバインディングに問題があります。私の問題は、説明、キー、編集可能なアイテムのリストがあります。私は選択ボックスに値を設定しているアイテムのリストを使用します。

var RequiredItemLine = function() { 
      var self = this; 

      self.desc = ko.observable(); 
      self.key = ko.observable(); 
      self.editable = ko.observable(false); 

      self.requireditemsdata = ko.observableArray([ 
       { desc: "Boarding of exposed wall openings in the vicinity of ...", key: "233", editable: true }, 
       { desc: "Call in manufacturers to initiate repairs on ...", key: "242", editable: true }, 
       { desc: "Call in specialist restorers/recoverers for ...", key: "244", editable: true }, 
       { desc: "Dispatch items for repair (schedule enclosed)", key: "243", editable: false }, 
       { desc: "Drying and cleaning of contents comprising ...", key: "240", editable: true }, 
       { desc: "Drying and protective oiling of water affected equipment", key: "241", editable: false }, 
       { desc: "Drying out of the affected areas of the premises", key: "235", editable: false }, 
       { desc: "Removal and repackaging of stock comprising ...", key: "239", editable: true }, 
       { desc: "Removal of agreed vulnerable contents to a place of safety (schedule enclosed) ", key: "236", editable: false }, 
       { desc: "Segregation of affected and unaffected stock comprising ...", key: "238", editable: true }, 
       { desc: "Temporary covering of roof to reinstate water tight integrity ", key: "234", editable: false }, 
       { desc: "Temporary guarding of affected area", key: "237", editable: false }, 
       { desc: "Temporary shoring of affected structure", key: "232", editable: false }]); 

      self.selectedItem = ko.observableArray([]); 

      self.selectedItem.subscribe(function (newValue) { 

       if (newValue) { 
        self.editable(newValue.editable); 
        //alert(newValue.editable); 
       } 
      }); 

     } 

ユーザーが選択リストからオプションを選択したときに、それが編集可能なプロパティが含まれている場合、選択リストは、DOMから隠すために持っていると、テキストボックスがDOMに見えるように受け取って値から割り当てられなければなりません選択リストから選択されたdesc。

 var RequiredItems = function() { 

      var self = this; 

      self.requiredItemSelection = ko.observableArray([]); 

      self.addRequiredItem = function() { 
       self.requiredItemSelection.push(new RequiredItemLine()); 

      }; 
      self.removeRequiredItem = function (line) { 
       self.requiredItemSelection.remove(line); 
      }; 

     } 

     var vm = new RequiredItems(); 
     ko.applyBindings(vm); 

問題は、選択がDOM変更イベントにロードされているときに発生し、選択リストまたは入力フィールドを表示することです。

   <div class='liveExample' > 

    <button data-bind='click: addRequiredItem'>Add Required Item</button> 
    <hr /> 

<table width='100%'> 

    <tbody data-bind='foreach: requiredItemSelection' > 
     <tr> 
      <td > 
       <select data-bind='options: requireditemsdata, optionsText: "desc", value: selectedItem'> </select> 
      </td> 

      <td> 
       <a href='#' data-bind='click: $parent.removeRequiredItem'> <img src="../images/Close.gif" /></a> 
      </td> 
     </tr> 
     <tr data-bind="visible : selectedItem().editable"> 
      <td> 
       <div class="editablecontent" data-bind='html : selectedItem().desc.replace(/\.\.\./g, "<span style=&#39;background-color:#ff77ee;margin-left:-2px;letter-spacing:0.05em&#39; contenteditable >...</span>")'></div> 


      </td> 
     </tr> 

    </tbody> 
</table> 

<ul data-bind='foreach: requiredItemSelection'> 


    <li data-bind="text : selectedItem().desc "></li> 
</ul> 




</div> 

はフィドルhttp://jsfiddle.net/aroor/VFv4H/3/ を参照してください。注：私は、バインディングoptionsCaptionを使用したくありません。この問題を解決する方法はありますか？または、私はデータ構造を正しく宣言しませんでしたか？

Answer 1

デフォルト値を設定すると起動しません。

optionsCaptionに何かを書きます。キャプションを追加するには、この構文を使用します。

<select data-bind="options: xxxx, 
        optionsCaption:'select', 
        optionsText: yyyy, 
        value: jjjjj"> 
</select> 

か、他

<select data-bind="options: xxxx, 
       optionsCaption: ' ', 
       optionsText: yyyy, 
       value: jjjjj"> 
</select> 

Answer 2

私はこの質問に答えを探している間にこの記事を見ました。私はまだこれが問題であるかどうかわからないが、多分次の人が利益を得るかもしれない。

私が正しく理解していれば、ノックアウト・データ・バインディング・ノックアウト・イベントが望ましくないロジックを実装するという問題があります。実際のJavaScriptイベントを比較して、ノックアウトによって発生したイベントは、ユーザーの操作によって発生するイベントとは異なるプロパティを持つことを発見しました。

ここでは、これらのプロパティの存在を確認することでこれを解決しました。これに代えて

：あなたは、あなたがあなたのイベントにノックアウトモデルおよびJavaScriptイベントを渡すことができるという事実を活用する必要がありますすることができ

self.addRequiredItem = function (ko_object, js_evt) { 
    if(js_evt.cancelable === false) { 
     self.requiredItemSelection.push(new RequiredItemLine()); 
    } 
}; 

：

self.addRequiredItem = function() { 
    self.requiredItemSelection.push(new RequiredItemLine()); 
}; 

はこれを試してみてください。キャンセル可能なプロパティはノックアウトDOMイベントには存在しないようですので、イベントがユーザーによってトリガーされたことを確認するためにチェックしました。