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