与CSS绑定KnockoutJS复选框

Question

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

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

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

我使用jQuery.uniforms.js为表单提供了一个很好的设计，所以在检查checkbox元素时，我可以看到div和span元素被添加到代码中以使其看起来更好：

<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绑定，如下所示：

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处理程序，并在父<span>元素处切换已checked类。 不需要jQuery代码，Knockout具有所有必需的实用程序功能。

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

这样你的绑定代码就可以保持不变。

http://jsfiddle.net/5TuTc/

Answer 2

好的，我很确定你可以在绑定中使用KO的函数和方法。 因此，例如在check中你可以添加一个匿名函数来设置它上面的父类。 但您可能希望将已检查的绑定绑定到ViewModel中的一个函数，该函数可以设置父级和observable。

最后，你可以创建一个bindingHandler来很好地做到这一点。 bindingHandler将是一个自定义操作，最初将应用于绑定数据的任何更改。 因此，当oneDayPermit经历更改时，将触发update方法。 bindingHandler将被发送一个对元素（复选框）以及绑定的引用，从这里我们可以使用jQuery来查找它的父span并在其上执行addClass方法。

KO代码：

    ko.bindingHandlers.prettyCheck = {
        init: function (element, valueAccessor) {
            var value = valueAccessor();
            if (value()) {
                $(element).parent("span").addClass('checked');
            } else {
                $(element).parent("span").removeClass('checked');
            }
        },
        update: function (element, valueAccessor) {
            var value = valueAccessor();
            if (value()) {
                $(element).parent("span").addClass('checked');
            } else {
                $(element).parent("span").removeClass('checked');
            }
        }
    };

    function viewModel() {
        var self = this;
        self.oneDayPermit = ko.observable(false);
    }

    ko.applyBindings(new viewModel(), $("#checkerDiv")[0]);

您的HTML将如下所示：

<div class="checker" id="checkerDiv">
  <span>
    <input type="checkbox" data-bind="prettyCheck: oneDayPermit, checked: oneDayPermit">
  </span>
</div>

这是小提琴： http ： //jsfiddle.net/jLqmc/21/

或者，您可以使用函数而不是直接绑定到observable。 在函数内部（可以传递元素的引用），您可以切换observable并执行jQuery操作。 你会看到3个参数，但第一个是我忘了。 它可能是KO作为上下文参考所需要的东西，实际上并不作为参数传递。 任何两个之后的任何东西都是作为参数传递的。

<div class="checker" id="checkerDiv">
  <span>
    <input type="checkbox" data-bind="checked: toggleCheck.bind($data, oneDayPermit, $(this))">
  </span>
</div>

在您的VM中

self.toggleCheck= function (binding, element) {
  //Toggle Observable and do your Element stuffs
}

Answer 3

在Permit中加载数据后，添加以下代码：$（'＃checkerDiv .checkboxes'）。uniform（）;

将类“复选框”或任何其他名称添加到绑定的所有复选框。