我有两个jQuery Mobile复选框绑定到同一个挖空视图模型成员。我希望单击一个复选框来更新视图模型,进而更新另一个复选框。请参阅此处的示例
该目录
<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>
爪哇语
function ViewModel(){
var self = this;
self.chk = ko.observable(false);
}
ko.applyBindings(new ViewModel());
我可以看到模型正在更新,文本字段显示其值。但复选框不是
当底层复选框控件更改其状态时,jQuery Mobile 必须刷新其复选框的自定义绘图,但当您通过 Knockout 以编程方式更改它时,它无法检测到它。它仅检测点击事件。这必须通过自定义挖空绑定来完成。
我创建了一个简单的自定义绑定,适用于所有版本的 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/
您的问题与 Jquery 移动而不是淘汰有关。我找到的唯一可以帮助您的解决方案是在模型上使用 suscription 来绕过它。
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/