javascript - 淘汰赛禁用绑定不适用于jquery ui按钮

Question

我disable在 jquery ui 按钮上使用淘汰赛绑定。当我在应用data-bind='disable: ture'了 jquery ui 按钮插件的任何按钮上使用时，它会禁用该按钮，但其外观未设置为禁用。在这里，我创建了一个示例小提琴：

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

我错过了什么？

Answer 1

正如 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 2

看起来当您使用 jqueryui 按钮时，它会覆盖属性的默认行为（因为它可以控制它们，但不确定如何，可能需要进一步研究）。

但是，我能够让它改变顺序：

ko.applyBindings();

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

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

为了让这两个库很好地发挥作用，您还可以编写自定义绑定。

Answer 3

我想通过为 jquery ui 按钮的选项添加对使用 observables 的支持来详细说明 gbs 的示例（效果很好）（例如，禁用映射到可观察对象，而不仅仅是 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");
}

};