1

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/

user2308978
  • 187
  • 3
  • 14

3 Answers3

3

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

user2308978
  • 187
  • 3
  • 14
1

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.

PW Kad
  • 14,953
  • 7
  • 49
  • 82
  • Hi kadumel, thank you very much for your hint, I completely revisited my example to better explain what I mean. The radio buttons on the bottom are to change the observable value through code. Pleas see my UPDATED fiddle. Clicking on the radio button will change the observable but not the flip switch toggle - so I think this is a refresh issue. Please, let me know what you mean. – user2308978 Jul 09 '13 at 07:44
1
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

KillerKiwi
  • 343
  • 1
  • 4
  • 8