淘汰禁用綁定不能用jQuery UI按鈕

Question

我正在使用jquery UI按鈕上的淘汰賽disable綁定。當我在任何應用了jquery ui按鈕插件的按鈕上使用data-bind='disable: ture'時，它會禁用該按鈕，但其外觀未設置爲禁用。在這裏，我創建了一個例子小提琴：

http://jsbin.com/arotuh/2/edit

什麼，我缺少什麼？

Answer 1

看起來像當你使用jqueryui按鈕它覆蓋了屬性的默認行爲（因爲它需要控制它們，不知道如何，但可能需要進一步研究它）。

不過，我能得到它的工作改變了順序：

ko.applyBindings(); 

$("button").eq(0).button(); 

$("button").eq(1).button({ disabled: true }); 

爲了讓兩個庫，以發揮很好，你也可以寫custom bindings。

Answer 2

正如spullen提到的，這裏是我會怎麼做使用自定義綁定：

ko.bindingHandlers.jqButton = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var options = valueAccessor(); 
     for (var p in options) { 
      options[p] = ko.utils.unwrapObservable(options[p]); 
     } 
     $(element).button(options); 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).button("destroy"); 
     }); 
    }, 
    update: function (element, valueAccessor) { 
     var options = valueAccessor(); 
     for (var p in options) { 
      options[p] = ko.utils.unwrapObservable(options[p]); 
     } 
     $(element).button("option", options); 
     $(element).button("refresh"); 
    } 
}; 
ko.applyBindings({ 
    flag: ko.observable(true) 
}); 

而在HTML：

<button data-bind="jqButton: {disabled: flag} ">Disable state using knockout disable binding</button> 

Answer 3

我想闡述一下GBS的例子（其中工程很好），通過添加對jQuery UI按鈕的選項使用observables的支持（例如，禁用被映射到observable而不僅僅是true或false）。

ko.bindingHandlers.jqButton = { 
init: function (element, valueAccessor, allBindingsAccessor) { 
    var options = valueAccessor(); 
    for (var p in options) { 
     // CHANGE STARTS HERE 
     if (ko.isObservable(options[p])) 
      options[p].subscribe(function (newValue) { 
       $(element).button("option", p, newValue); 
       $(element).button("refresh"); 
      }); 
     // CHANGE ENDS HERE 
     options[p] = ko.utils.unwrapObservable(options[p]); 
    } 
    $(element).button(options); 
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).button("destroy"); 
    }); 
}, 
update: function (element, valueAccessor) { 
    var options = valueAccessor(); 
    for (var p in options) { 
     options[p] = ko.utils.unwrapObservable(options[p]); 
    } 
    $(element).button("option", options); 
    $(element).button("refresh"); 
} 

};