Jquery mobile 将knockout.js绑定到布尔JQuery移动翻转开关

我有一个绑定到JQM翻转开关的布尔值，但我看不到它对底层可观察对象的更改做出反应

这是我的真/假观察值：

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翻转开关切换和击倒组合在一起的最佳方式

请点击此处：

提前感谢大家

更新：使用更好的测试用例：

有两件事值得注意-

当您使选中的值依赖于某些内容时，我相信您需要使用value:binding而不是checked:binding

第二，您将其设置为一个字符串“true”，而不是布尔值true，但是您的绑定是布尔值true

请尝试在您的绑定中进行这些调整，如果无法解决问题，请告诉我。

需要注意的两件事-

当您使选中的值依赖于某些内容时，我相信您需要使用value:binding而不是checked:binding

第二，您将其设置为一个字符串“true”，而不是布尔值true，但是您的绑定是布尔值true

试着调整一下你的装帧，如果不能解决问题，请告诉我。

我知道了

感谢kadumel指出我的第一段代码非常糟糕。 然后，我从计算的可观察对象切换到自定义绑定，在我看来这是一个很好的解决方案：

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>

这是工作小提琴：

希望这能帮助其他人处理JQM翻转开关

通过扩展程序实现与真布尔可观察对象的绑定：这就是isMale.formattedValue的含义

Tim的博客中描述了这个非常干净和强大的解决方案谢谢你，Tim

我明白了

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" />

感谢kadumel指出我的第一段代码非常糟糕。 然后，我从计算的可观察对象切换到自定义绑定，在我看来这是一个很好的解决方案：

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>

这是工作小提琴：

希望这能帮助其他人处理JQM翻转开关

通过扩展程序实现与真布尔可观察对象的绑定：这就是isMale.formattedValue的含义

Tim的博客中描述了这个非常干净和强大的解决方案谢谢你，Tim

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" />

这似乎很有效

---

这似乎工作得相当干净

嗨，卡杜梅尔，非常感谢你的提示，为了更好地解释我的意思，我重新审视了我的示例。底部的单选按钮用于通过代码更改可观察值。请看我最新的小提琴。点击单选按钮将改变可观察的，但不是翻转开关-所以我认为这是一个刷新问题。请让我知道你的意思。嗨，卡杜梅尔，非常感谢你的提示，我完全重新审视了我的例子，以便更好地解释我的意思。底部的单选按钮用于通过代码更改可观察值。请看我最新的小提琴。点击单选按钮将改变可观察的，但不是翻转开关-所以我认为这是一个刷新问题。请让我知道你的意思。当我在“开/关”复选框中使用它时，我的“绑定”变量为真/假自动。当我在“开/关”复选框中使用它时，我的“绑定”变量为真/假自动