将kickout.js绑定到布尔型JQuery Mobile翻转开关切换 [英] Bind knockout.js to a boolean JQuery Mobile flip switch toggle

问题描述

我有一个绑定到JQM触发器开关的布尔值，但是我看不到它对基础可观察对象的更改做出反应.

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.

这是我的对错:

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;
};

结合使用JQM拨动开关拨动和淘汰按钮的最佳方法是哪一种?

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

jsFiddle此处: http://jsfiddle.net/nmq7z/

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

先谢谢大家

更新:具有更好的测试用例: http://jsfiddle.net/FU7Nq/

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

推荐答案

我明白了，

感谢kadumel，它指出我的第一段代码确实很糟糕. 然后，我从计算的可观察值切换到自定义绑定，这对我来说似乎是一个很好的解决方案:

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>

这是正常工作的提琴: http://jsfiddle.net/FU7Nq/1/

希望这可以帮助其他人处理JQM翻转开关切换.

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

通过扩展程序可实现具有"true"布尔值可观察值的绑定:这是isMale.formattedValue的含义.

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

蒂姆(Tim)的博客中描述了这种非常干净且功能强大的解决方案(谢谢蒂姆！).

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

这篇关于将kickout.js绑定到布尔型JQuery Mobile翻转开关切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！