javascript - KnockoutJS 复选框与 CSS 绑定(bind)

Question

我有一个使用 KnockoutJS 绑定(bind)的复选框。该值已分配给输入元素，但我看不到复选框被选中，只有在我手动单击它时才能看到。

在幕后，输入元素正在工作并为属性获取选中的值，但因为 Im jQuery.uniforms.js 为表单提供了一个很好的设计，所以我想这就是为什么我没有在视觉上看到检查复选框。

<div class="inline">
   <input type="checkbox" data-bind='checked: permit.oneDayPermit' />
   <label>One Day Permit</label>
</div>

我正在使用 jQuery.uniforms.js 来为表单提供漂亮的设计，因此在检查复选框元素时我可以看到 div 和 span 元素是beign 添加到代码中以使其看起来更好:

<div class="checker">
  <span>
    <input type="checkbox" data-bind="checked: permit.oneDayPermit" value="[object Object]">
  </span>
</div>

当我点击复选框元素使其被选中时，span 元素有一个名为“checked”的类:

<div class="checker">
  <span class="checked">
    <input type="checkbox" data-bind="checked: permit.oneDayPermit" value="[object Object]">
  </span>
</div>

关于如何解决此问题以便复选框获得复选标记的任何线索？

感谢任何帮助。

Answer 1

您可以猴子修补 Knockout 的内置 checked绑定(bind)，像这样:

ko.bindingHandlers.checked.update = (function () {
    var origialUpdate = ko.bindingHandlers.checked.update;
    return function (element, valueAccessor) {
        var parent = element.parentNode,
            checked = ko.unwrap(valueAccessor());

        origialUpdate.apply(this, arguments);

        if (parent.nodeName.toLowerCase() === "span") {
            ko.utils.toggleDomNodeCssClass(parent, "checked", checked);
        }
    };
})();

此代码段劫持了 update绑定(bind)的处理程序并切换 checked家长类<span>元素。无需 jQuery 代码，Knockout 具有所有必需的实用函数。

不过，您可以使用 jQuery 实现更精细的版本。

这样您的绑定(bind)代码就可以保持不变。

http://jsfiddle.net/5TuTc/