淘汰赛和jQuery Mobile:复选框 [英] Knockout and jQuery Mobile: Checkboxes

问题描述

我正在尝试向文档中动态添加复选框和标签元素. Checkbox元素具有Knockout的data-bind属性，以将其值绑定到ViewModel中的可观察值.但是，当我尝试通过执行

I'm trying to dynamically add checkbox and label elements to the document. Checkbox element has Knockout's data-bind attribute to bind its value to an observable value in the ViewModel. However when I try to style the checkboxes with jQuery Mobile by executing

$('input[type="checkbox"]').checkboxradio();

数据绑定属性将被删除.如果我忽略上述内容，则可以正确设置数据绑定属性，并且绑定可以正常工作.

data-bind attributes will be removed. If I leave out the above line, data-bind attributes are properly set and the binding works.

有没有办法同时拥有jQuery Mobile样式和Knockout绑定?

Is there a way to have both jQuery Mobile styling and Knockout bindings at the same time?

我正在使用jQuery Mobile RC1和Knockout 1.2.1.

I'm using jQuery Mobile RC1 and Knockout 1.2.1.

推荐答案

我也遇到了此问题.不幸的是，这里的所有建议要么对我不起作用，要么存在其他问题.因此，我创建了一个简单的自定义绑定，该绑定适用于所有版本的KO(包括最新的v3 ):

I have also encountered this problem. Unfortunately, all the suggestions here either did not work for me or had other issues. So I have created a simple custom binding that works in all versions of KO (including the latest 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"/>

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

See a complete working example here:

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

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

这篇关于淘汰赛和jQuery Mobile:复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！