jquery mobile button enable/disable

[obruening]

i have a question about the "enable" binding.

i have a jquery mobile button which i want to enable or disable upon a
condition. it works as expected, but jquery mobile has a special
method to enable or disable the button visually ($
('#mybutton').button('disable');). so the default enable action of
knockout.js is not enough is this case. how can i extend it to include
the jquery mobile specific method call?

best regards
oliver bruening

[rpn]

Hello-

Typically, you would want to use a custom binding for this type of action.  An easy thing to do is to write a "wrapper" to one of the exisiting bindings.

For yours it might look something like:

ko.bindingHandlers.jQueryButtonEnable = {
    update: function(element, valueAccessor) {
        //first call the real enable binding
        ko.bindingHandlers.enable.update(element, valueAccessor);
        
         //do our extra processing
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).button(value ? "enable" : "disable");
    }  
};

Some documentation on custom bindings here .

[obruening]

thank you very much for your help, it works!

[Diego Guidi]

your suggestion worked for me after that I've changed the code as is:

ko.bindingHandlers.enable.update(el, accessor);
$(el).button().button('refresh');

your code throws an exception, something like "called disable on button prior to initialization"

[john...@gmail.com]

The 'refresh' option didn't change my input field styling back to look "enabled". Use rpn's code, but add a Try Catch to swallow the "called disable...." exception.

Here is my version used for a textinput...

ko.bindingHandlers.jqmTIEnable = {

    update: function (element, valueAccessor) {

        //first call the real ko binding handler

        ko.bindingHandlers.enable.update(element, valueAccessor);

        //next, trigger the jqm enable/disable

        try {

            var valueUnwrapped = ko.unwrap(valueAccessor());

            $(element).textinput(valueUnwrapped ? 'enable' : 'disable');

        } catch (x) { }

    }

};