如何在淘汰賽中使用擴展器將元素ID綁定到observable？

Question

我有一組複選框，每個綁定到「檢查」的處理程序自定義：

<input type="checkbox" name="colours-red" data-bind="jqmCheckbox: colourRed" id="check-1" /> 
    <input type="checkbox" name="colours-green" data-bind="jqmCheckbox: colourGreen" id="check-2" /> 
    <input type="checkbox" name="colours-blue" data-bind="jqmCheckbox: colourBlue" id="check-3" /> 

我的視圖模型很簡單：

this.colourRed = ko.observable(false); 
this.colourGreen = ko.observable(false); 
this.colourBlue = ko.observable(false); 

現在，我儘量延長顏色接下來，讓它自動更新。 我需要其他用戶得到通知，如果這是發生變化：

ko.extenders.elementId = function (target, option) { 
    target.elId = ko.observable(); 

    function setElementId(target, option) { 
     target.elId(option); 
    } 
    target.subscribe(setElementId); 
    return target; 
}; 

自定義裏面綁定我能得到的元素ID：

ko.bindingHandlers.jqmCheckbox = { 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     ko.bindingHandlers.checked.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
     // ...set this valueAccessor extender ? 
    } 
}; 

但我沒能得到這個工作，而且我也不知道這是否可能。 如何設置我的擴展器在自定義綁定處理程序中，元素可用作參數？

這是的jsfiddle：提前http://jsfiddle.net/Tk2FZ/1/

感謝

Answer 1

解決： 又花了一些時間後，得到這個工作，我發現這個問題。 這是最後的工作小提琴：http://jsfiddle.net/z9qZc/

我把這個答案給我自己，以防萬一這兩個美分可以幫助其他人空閒時間。 我發現這個擴展器是一個通用的解決方案，也許不是那麼糟糕。 讓我知道你在想什麼。

答案是（現在）很清楚：初始化擴展器（因爲在大多數情況下，小心閱讀文檔就足夠了......）。

self.colourRed = ko.observable(true).extend({elementId:""}); 
self.colourGreen = ko.observable(false).extend({elementId:""}); 
self.colourBlue = ko.observable(false).extend({elementId:""}); 

感謝Cyanfish指出我的第一次嘗試臃腫與不必要的代碼，並幫助我很多。 感謝所有挖掘出來的人，他們製作了這個精美的藝術品來幫助我們。

Answer 2

我不會與增量打擾;只需在綁定處理程序中設置elId屬性即可。

ko.bindingHandlers.jqmCheckbox = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     if (!valueAccessor().elId) { 
      valueAccessor().elId = ko.observable(); 
     } 
     valueAccessor().elId(element.id); 
     return ko.bindingHandlers.checked.init.apply(this, arguments); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     return ko.bindingHandlers.checked.update.apply(this, arguments); 
    } 
}; 

的代碼是init內，因爲當綁定一個特定元素初始化這就是所謂的。

編輯

如果需要可觀察到立即可用，您可以使用該擴展器（除了上面的代碼）。當綁定被初始化時，observable將被更新。

ko.extenders.elementId = function (target, option) { 
    target.elId = ko.observable(); 
    return target; 
};