3

我正在尝试学习 Knockout，同时构建一个相当复杂的动态表单，该表单使用 jQuery 插件 Uniform JS 进行样式设置。由于 Knockout 动态构建表单的一部分，因此我需要确保 Uniform JS 跟上动态生成的表单元素并为其设置样式。

经过一番搜索后，我发现了 Mikhail Temkine 的一篇名为“ Knockout JS knockouts ”的博文，解释了如何编写自定义 Knockout 绑定来解决统一样式复选框的问题。自定义绑定如下所示：

ko.bindingHandlers.checkedUniform = {
    init: function (element, valueAccessor) {
        ko.bindingHandlers.checked.init(element, valueAccessor);
    },
    update: function (element, valueAccessor) {
        ko.bindingHandlers.checked.update(element, valueAccessor);
        $.uniform.update($(element));
    }
};

简化的 HTML 看起来像这样：

<ul data-bind="foreach: items">
    <li data-bind="text: name, click: $root.editItem, css: {bold: bolded()}"></li>
</ul>
<div data-bind="with: selectedItem">
    Edit list item: <input data-bind="value: name" />
    Make it bold: <input type="checkbox" data-bind="checkedUniform: bolded />
</div>

自定义绑定显然使用了uniform.update()应该刷新样式复选框状态的方法。不幸的是，它不起作用。复选框的样式根据选定的统一设计模板进行设置，但是一旦重新渲染 Knockout 模板（在这种情况下发生selectedItem更改），显示复选框是否被勾选的指示符就会丢失。复选框仍然有效，您可以单击它们来切换它们的状态，只是它们总是显示为未选中。

我创建了一个简单的 jsFiddle 来演示这个问题：

http://jsfiddle.net/tomas_eklund/RaSpK/1/

4

1 回答 1

2

您的样式会丢失，因为在使用with绑定时，它会在其值更改时替换下面的 DOM。因此，您的首字母$('input[type="checkbox"]').uniform();不会应用于新创建的复选框。

为了解决这个问题，而不是通常应用uniform插件，将初始化逻辑移动到您的checkedUniforminit 函数中（一旦绑定应用于元素，即使该元素是由 KO 刚刚创建的，它也会运行）：

ko.bindingHandlers.checkedUniform = {
    init: function (element, valueAccessor) {
        ko.bindingHandlers.checked.init(element, valueAccessor);
        $(element).uniform();
    },
    update: function (element, valueAccessor) {
        ko.bindingHandlers.checked.update(element, valueAccessor);
        $.uniform.update($(element));
    }
};

演示JSFiddle。

于 2013-10-03T05:10:52.027 回答