Question

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

来设置jQuery Mobile的复选框样式时

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

将删除数据绑定属性。如果我省略上面的行，则正确设置数据绑定属性并且绑定有效。

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

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

Answer 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/

Answer 2

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

然后您可以执行以下操作：

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

希望这会有所帮助！

Answer 3

使用敲门默认检查绑定与jQuery mobile这样的样式对象存在问题。它与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/看到它正常工作。看起来像是解决问题的方法。

Answer 4

我创建了一个与jQuery Mobile 1.2.0和Knockout 2.2.1一起使用的简单绑定，并使用默认的jQuery移动复选框。此绑定不依赖于自定义图标或JQuery Mobile的CSS样式。它还允许在HTML（<input type="checkbox" ... />）中使用常规复选框标记，而不是使用像div这样的备用标记元素。

这是小提琴：http://jsfiddle.net/thedude458/52baX/

注意：目前，该示例仅支持单个复选框，而不是列表，因为这是我目前所需要的。它还假定绑定属性是可观察的。

Answer 5

以下是我为jQueryMobile复选框构建的自定义处理程序的重要注释代码：

ko.bindingHandlers.checkbox = {
init: function(element, valueAccessor) {

    // set the dom element to a checkbox and initialize it (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio();
    checkbox.attr('type', 'checkbox');

    // register change event to update the model on changes to the dom
    ko.utils.registerEventHandler(element, "change", function() {
        valueAccessor()(

            // off because it is before the ui has refreshed
            $(this).siblings('label.ui-checkbox-off').length > 0
        );
    });
},
update: function(element, valueAccessor) {

    // update the checked binding, i.e., check or uncheck the checkbox
    ko.bindingHandlers.checked.update(element, valueAccessor)

    // and refresh the element (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio('refresh')
}
};

Knockout和jQuery Mobile：Checkboxes

5 个答案:

修改