1

我有一个绑定到 JQM 翻转开关切换的布尔值，但我无法看到它对底层 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 翻转开关切换和 Knockout 结合起来的最佳方式是什么？

jsFiddle在这里：http: //jsfiddle.net/nmq7z/

在此先感谢大家

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

4

3 回答 3

3

我知道了，

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

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 翻转开关切换。

与“真正的”布尔可观察对象的绑定是通过扩展器实现的：这就是 isMale.formattedValue 的含义。

这个非常干净和强大的解决方案在 Tim 的博客中有所描述（谢谢你，Tim！）。

于 2013-07-18T10:11:47.053 回答
1

有两点值得注意——

当您使检查值依赖于某些东西时，我认为您需要使用值：绑定而不是检查：绑定。

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

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

于 2013-07-07T17:47:38.250 回答
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" />

这似乎工作得相当干净

于 2015-11-09T01:40:26.183 回答