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

Question

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/

Answer 1

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!).

Answer 2

Two things of note -

When you are making the checked value dependent on something I believe you need to use value: binding instead of checked: binding.

Second - You are setting it equal to a string of 'true' instead of boolean true, but your binding is to a boolean of true.

Try those adjustments in your binding and let me know if that doesn't fix it.

Answer 3

ko.bindingHandlers.jqmBindFlipSwitch = {
    init: function (element, valueAccessor) {
        $(element).change(function () {
            var value = valueAccessor();
            value($(element).is(":checked"));
        }).blur(function () {
            var value = valueAccessor();
            value($(element).is(":checked"));
        });
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var valueUnwrapped = ko.utils.unwrapObservable(value);
        $(element).prop('checked', valueUnwrapped)
            .flipswitch().flipswitch('refresh'); 
    }
};

<input data-bind="jqmBindFlipSwitch: siteVisitRequired" type="checkbox" data-on-text="Yes" data-off-text="No" />

This seems to work fairly cleanly