將淘汰賽結合與selectOrDie結合使用

Question

我希望能夠在選擇元素上應用淘汰賽結合selectOrDie以統一應用selectOrDie。

ko.bindingHandlers.selectOrDie = { 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // This will be called when the binding is first applied to an element 
     // Set up any initial state, event handlers, etc. here 

     $(element).selectOrDie({ 
      onChange: function() { 
       console.log(element); 
      } 
     }); 
    }, 
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // This will be called once when the binding is first applied to an element, 
     // and again whenever any observables/computeds that are accessed change 
     // Update the DOM element based on the supplied values here. 
     console.log($(element).siblings('span .sod_label').text()); 

    } 
}; 

我不知道如何設置它，以selectOrDie註冊的更改觸發綁定更新。還是有更好的方法？

這是選擇的元素，有什麼特別的：

  <select data-bind="selectOrDie: $data" data-custom-class="w60"> 
       <option>10</option> 
       <option>20</option> 
       <option>30</option> 
       <option>50</option> 
       <option>Alle</option> 
      </select> 

我怎樣才能讓一個淘汰賽綁定一般適用selectOrDie的元素？

Answer 1

對此的最好方法是使用現有的options結合所擊倒提供，以保證雙向數據視圖模型的一些陣列或觀察到的陣列和你select元素之間的結合善良。

然後創建一個單獨的綁定處理程序，該處理程序允許將selectOrDie小部件應用於相同的select元素。下面是我在前面創建了一個selectOrDie裝訂處理程序：

ko.bindingHandlers.selectOrDie = { 
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
     // apply selectOrDie widget to select element 
     $(element).selectOrDie(valueAccessor()); 

     var subsription, options = allBindings()["options"]; 

     // check if bounded collection from "options" binding is observable array 
     if(options && ko.isObservable(options) && "push" in options){ 
      // ensure changes to bounded collection update selectOrDie widget 
      subscription = options.subscribe(function(){ 
       $(element).selectOrDie("update"); 
      }); 
     } 

     // register disposal to clean up after dom node is removed 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      subscription.dispose(); 
      $(element).selectOrDie("destroy"); 
     }); 
    } 
}; 

現在結合這個綁定處理程序與現有的options結合可以讓你做到這一點：我已經通過了

<select data-bind="options: myArray, value: myValue, selectOrDie: { }"> 
</select> 

公告將空對象轉換爲selectOrDie綁定，還可以傳遞包含有效的configuration options的對象，而不是像這樣：

<select data-bind="options: myArray, value: myValue, selectOrDie: {customClass: 'someclass' }"> 
</select> 

檢查此次工作fiddle。

Answer 2

如果我把你的問題寫出來（道歉，如果我不:)）你試圖將DOM上的變化反映回綁定到元素的觀察值。如果是這種情況，那麼你所需要做的就是添加代碼來改變插件更改事件中observable的值，在你的情況下，在「onChange」回調中。這樣的修改將類似於

$(element).selectOrDie({ 
      onChange: function() { 
       var value = valueAccessor(); 
      value($(element).val()); //extract the value you wish to set to the observable here 
      } 
     }); 

我有一個創建你的代碼的滿含淚水縮小版本沒有此https://jsfiddle.net/0Ljy13c0/4/

Answer 3

插件結束語一個jQuery插件，使用自定義綁定是相當簡單的。您必須設置一種傾聽init中的更改的方式。這是您將所選值應用於可觀察值的位置。在update中，您將需要使用可觀察值的當前值更新視圖。每當可觀察到的變化時，將運行update。如果您沒有實現update方法，那麼如果您從其他位置修改observable，則此更改將不會反映在select中。

看起來SelectOrDie爲您提供了onChange函數從的<select>得到改變和'update'選項將更改應用於的<select>。

ko.bindingHandlers.selectOrDie = { 
    init: function (element, valueAccessor) { 
     $(element).selectOrDie({ 
      onChange: function() { 
       var value = valueAccessor(); //get observable 
       value($(element).val()); //write to observable 
      } 
     }); 
    }, 
    update: function (element, valueAccessor) { 
     var value = ko.utils.unwrapObservable(valueAccessor()); //get current observable value 
     $(element).val(value); //update selected value 
     $(element).selectOrDie('update'); //inform SoD that something has changed 
    } 
};