jquery-mobileknockout.jscustom-bindingcomputed-observablejquery-mobile-flipswitch

Bind knockout.js to a boolean JQuery Mobile flip switch toggle


i have a boolean value bound to a JQM flip switch toggle, but i'm not able to see it reacting to changes to the underlying observable.

This is my true/false observable:

ko.booleanObservable = function (initialValue) {
    var _actual = ko.observable(initialValue);
    var result = ko.computed({
        read: function () {
            var readValue = _actual().toString();
            return readValue;
        },
        write: function (newValue) {
            var parsedValue = (newValue === "true");
            _actual(parsedValue);
        }
    });
    return result;
};

Which is the best way to combine JQM flip switch toggle and Knockout?

jsFiddle here: http://jsfiddle.net/nmq7z/

Thanks in advance to all

UPDATED: with a better test case: http://jsfiddle.net/FU7Nq/


Solution

  • I got it,

    Thanks to kadumel which point out that my first piece of code was really bad. Then, i switched from a computed observable to a custom binding, which seems to me a good solution:

    ko.bindingHandlers.jqmFlip = {
        init: function (element, valueAccessor) {
            var result = ko.bindingHandlers.value.init.apply(this, arguments);
            try {
                $(element).slider("refresh");
            } catch (x) {}
            return result;
        },
        update: function (element, valueAccessor) {
            ko.bindingHandlers.value.update.apply(this, arguments);
            var value = valueAccessor();
            var valueUnwrapped = ko.utils.unwrapObservable(value);
            try {
                $(element).slider("refresh");
            } catch (x) {}
        }
    };
    
    
    
    <select name="select-ismale" id="select-ismale" data-bind="jqmFlip: isMale.formattedValue" data-role="slider">
        <option value="false">No</option>
        <option value="true">Yes</option>
    </select>
    

    Here is the working Fiddle: http://jsfiddle.net/FU7Nq/1/

    Hope this can help some other People to deal with the JQM Flip Switch Toggle.

    The binding with a "true" boolean observable is realized through an extender: this is the meaning of isMale.formattedValue.

    This very clean and powerful solution is described in Tim's blog (thank You, Tim!).