2015-10-30 51 views
2

我希望能夠在選擇元素上應用淘汰賽結合selectOrDie以統一應用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的元素?

回答

3

對此的最好方法是使用現有的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

0

如果我把你的問題寫出來(道歉,如果我不:))你試圖將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/

0

插件結束語一個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 
    } 
};