CODEWITHSUNDEEP
javascriptjqueryknockout.js
user1740381
user1740381

Reputation: 2199

Knockout disable binding is not working with jquery ui button

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 ?

Upvotes: 0

Views: 1444

Answers (3)

SabbeRubbish
SabbeRubbish

Reputation: 61

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 e.g. 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");
}

};

Upvotes: 0

gbs
gbs

Reputation: 3529

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>

Upvotes: 2

spullen
spullen

Reputation: 3317

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.

Upvotes: 0

Related Questions