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

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处理程序，并在父checked元素处切换<span>类。不需要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>

在您的虚拟机中

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

Answer 3

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

添加课程＆＃34;复选框＆＃34;或所有绑定的复选框的任何其他名称。

与CSS绑定KnockoutJS复选框

3 个答案: