Knockout和jQuery Mobile：复选框

Question

我正在尝试动态地向文档中添加复选框和标签元素。复选框元素具有Knockout的data-bind属性，以将其值绑定到ViewModel中的可观察值。但是，当我尝试使用jQuery Mobile样式化复选框时，执行以下操作：

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

data-bind属性将被移除。如果我省略上述行，则data-bind属性会被正确设置并且绑定有效。

有没有一种方法可以同时拥有jQuery Mobile样式和Knockout绑定？

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

- Ville Salonen

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/

（注：此链接为英文网站，需自行翻译）

- srgstm

Answer 2

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

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

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

希望这能有所帮助！

- NickGreen

---

这可能解决了我的问题，但我认为这有点违背了 Knockout 的初衷。我选择 Knockout 的原因是你可以在 HTML 中纯粹地设置绑定。所以如果我必须在 HTML 中放置一些逻辑以及一些 JavaScript 代码，那么我可能会选择另一个框架。 - Ville Salonen

Answer 3

使用Knockout的默认选中绑定与像jQuery Mobile这样的样式化对象存在问题。它具有与jQueryUi的Button/Buttonset函数相同的问题。复选框上有一个标签，指示正在发生的事情，并且通过标准的Knockout选中绑定无法正确更新。

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

要直接使用Knockout处理来自jQuery Mobile的这些样式化对象，演示代码将需要修改以处理不同的DOM上下文。我会在有空闲时间时发布代码更新。

编辑

在Google Groups - Knockout中，luv2hike发布了一个解决方案。您可以在http://jsfiddle.net/luv2hike/nrJBC/上看到它的工作情况。看起来这是一个解决您问题的有效方法。

- photo_tom

---

这是一个很好的提示，但不幸的是它并不能解决我的问题。由于某种原因，在应用checkboxradio()之后，我的data-bind属性会消失，所以无论它是否绑定到checked或jqmChecked都没有关系。我需要进一步调查是什么导致了这个问题的消失。 - Ville Salonen

抱歉误读了你的问题。在阅读了http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/forms/forms-radiobuttons.html文档后，我不明白为什么你要手动应用样式？文档表明，您只需按照规则构建HTML，框架将完成其余工作。 - photo_tom

抱歉回复晚了。我正在动态添加这些控件，所以在我将这些复选框添加到文档之前，jQuery Mobile已经完成了它的工作。 - Ville Salonen

我实际上已经有了解决方案。我距离发布一些自定义绑定还有大约3-4周的时间，这些绑定将自动调用正确的jQuery Mobile函数。实际上，这是三组绑定，可以让同一源代码运行jQueryUI、jQuery Mobile和两者都不运行。您只需要更改包含的文件即可。 - photo_tom

Answer 4

这是我为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')
}
};

- Matthew James Davis

Answer 5

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

这是fiddle链接: http://jsfiddle.net/thedude458/52baX/

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

- Justin Holzer