Knockout 和 jQuery Mobile：复选框

Question

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

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

数据绑定属性来使用 jQuery Mobile 设置复选框样式时，该属性将被删除。如果我省略上面的行，数据绑定属性将被正确设置并且绑定有效。

有没有办法同时拥有 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 网上论坛 - Knockout 中 ， luv2hike 发布了一个解决方案。您可以在 http://jsfiddle.net/luv2hike/nrJBC/ 上看到它的工作情况。看起来可以解决您的问题。

Answer 4

我创建了一个与 jQuery Mobile 1.2.0 和 Knockout 2.2.1 配合使用的简单绑定，并与默认的 jQuery Mobile 复选框配合使用。此绑定不依赖于自定义图标或 JQuery Mobile 的 CSS 样式。它还允许在 HTML 中使用常规复选框标记 ()，而不是使用 div< 等替代标记元素/代码>。

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

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

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')
}
};