淘汰赛和jQuery Mobile:复选框

我试图动态添加复选框和标签元素到文档中。 Checkbox元素具有Knockout的data-bind属性,可将其值绑定到ViewModel中的可观察值。 但是,当我尝试通过执行样式与jQuery Mobile复选框

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

数据绑定属性将被删除。 如果我省略上面的行,数据绑定属性被正确设置并且绑定起作用。

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

我使用的是jQuery Mobile RC1和Knockout 1.2.1。


我也遇到过这个问题。 不幸的是,这里的所有建议要么不适合我,要么有其他问题。 所以我创建了一个简单的自定义绑定,适用于所有版本的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/


请参阅:https://gist.github.com/1006808

然后你可以做如下的事情:

var $checkbox = $('input[type="checkbox"]');
$checkbox.checkboxradio();
$checkbox.dataBind({
    your options..
});

希望这会有所帮助!


使用类似jQuery移动的样式化对象的敲除默认检查绑定存在问题。 它具有与jQueryUi的Button / Buttonset相同的问题。 复选框上方有一个标签,用于指示正​​在发生的事情,并且不会通过标准敲除检查绑定正确更新。

它在http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html中讨论。

要直接从jQuery Mobile中使用这些样式化对象敲除,必须修改演示的代码以处理不同的DOM上下文。 当我可以腾出时间做这件事时,我会发布代码更新。

编辑

在Google Groups - Knockout中,luv2hike发布了一个解决方案。 你可以在http://jsfiddle.net/luv2hike/nrJBC/看到它的工作。 看起来像你的问题的工作修复。

链接地址: http://www.djcxy.com/p/83811.html

上一篇: Knockout and jQuery Mobile: Checkboxes

下一篇: Knockout.js: time input format and value restriction