Knockout禁用绑定不适用于jquery ui按钮

Question

I am using knockout disable binding on jquery ui button. When i used data-bind='disable: ture' on any button on which jquery ui button plugin is applied, it disable that button but its appearance is not set as disabled. Here i have created an example fiddle:

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

What i am missing ?

Answer 1

As mentioned by spullen, here is how I would do using custom bindings:

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)
});

And in the HTML:

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

Answer 2

Looks like when you use the jqueryui button it overrides the default behavior of the attributes (as in it takes control of them, not sure how though, probably would need to look into it further).

However, I was able to get it to work changing the order:

ko.applyBindings();

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

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

To get the two libraries to play nicely you could also write custom bindings .

Answer 3

I'd like to elaborate on gbs's example (which works pretty good) by adding support for using observables for the jquery ui button's options (like eg disabled being mapped to an observable rather than just true or 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");
}

};