當選擇列表初始化時，敲除火災會改變事件

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

問題是每當select被加載到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> 

否則，你可以使用optionsCaption如下圖所示

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

Answer 2

我在查找這個問題的答案時遇到了這篇文章。我不確定這是否仍然是一個問題，但也許下一個人會受益。

如果我理解正確，問題在於淘汰賽的數據綁定火災淘汰賽事件，從而實施不需要的邏輯。我做了一些比較實際的JavaScript事件，並發現由knockout觸發的事件具有不同的屬性，即由用戶交互觸發的事件。

這是我如何通過檢查這些屬性的存在來解決這個問題。

取而代之的是：

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

試試這個：

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

你可以和應該利用的事實，你可以通過基因敲除模型和JavaScript事件到您的活動。可取消的財產似乎並不存在於挖空dom事件，所以我檢查它確保事件是由用戶觸發的。