jquery mobile 和 knockout 复选框未使用 viewmodel 更新答案

【问题标题】：jquery mobile and knockout checkbox not updating with viewmodeljquery mobile 和 knockout 复选框未使用 viewmodel 更新
【发布时间】：2013-10-05 19:41:25
【问题描述】：

我有两个 jQuery Mobile 复选框绑定到同一个淘汰视图模型成员。我希望单击一个复选框来更新视图模型，然后更新另一个复选框以进行检查。见例子here

HTML

<span data-bind="text: chk"></span>
<input id="checkbox1" name="" data-bind="checked: chk" type="checkbox">
<label for="checkbox1">A</label>
<input id="checkbox2" name="" data-bind="checked: chk" type="checkbox">
<label for="checkbox2">B</label>

Javascript

function ViewModel(){
var self = this;

self.chk = ko.observable(false);
}

ko.applyBindings(new ViewModel());

我可以看到模型正在更新，文本字段显示其值。但复选框不是

【问题讨论】：

您遇到的问题真的很奇怪。我可以摆脱错误的唯一方法是删除标签的for 属性......可能需要提交一个带有敲除的错误;）
我看到输入复选框的 ID 链接不同，以便将它们链接到它们的标签...

标签： jquery-mobile knockout.js

【解决方案1】：

问题在于，当底层复选框控件更改其状态时，jQuery Mobile 必须刷新其自定义的复选框绘制，但是当您通过 Knockout 以编程方式更改它时，它无法检测到它。它只检测 onclick 事件。这必须通过自定义敲除绑定来完成。

我创建了一个简单的自定义绑定，适用于所有版本的 KO（包括最新的 v3）：

ko.bindingHandlers.jqmChecked = {
    init: ko.bindingHandlers.checked.init,
    update: function (element, valueAccessor) {
        //KO v3 and previous versions of KO handle this differently
        //KO v3 does not use 'update' for 'checked' binding
        if (ko.bindingHandlers.checked.update) 
            ko.bindingHandlers.checked.update.apply(this, arguments); //for KO < v3, delegate the call
        else 
            ko.utils.unwrapObservable(valueAccessor()); //for KO v3, force a subscription to get further updates

        if ($(element).data("mobile-checkboxradio")) //calling 'refresh' only if already enhanced by JQM
            $(element).checkboxradio('refresh');
    }
};

应该这样使用：

<input type="checkbox" data-bind="jqmChecked: someValue" id="checkbox1"/>

在此处查看完整的工作示例：

http://jsfiddle.net/srgstm/ub6sq/

【讨论】：

【解决方案2】：

您的问题与 Jquery mobile 相关，而不是淘汰赛。我发现对您有帮助的唯一解决方案是在您的模型上使用订阅来解决它。

function myViewModel(){
    var self = this;
    self.chk2      = ko.observable(false);
    self.chk       = ko.observable(false);
    self.chk.subscribe(function(newValue) {
        console.log (newValue);
        //Handle jQuery Mobile
        $("input[data-bind='checked: chk']").each(function(){
            if ($(this).is(':checked') != newValue)  {
                $(this).prop('checked', newValue).checkboxradio("refresh");
            }
        });
    });
}



ko.applyBindings(new myViewModel());

这里是 jsFiddle：http://jsfiddle.net/9QSaY/

【讨论】：