在 Knockout 模板中使用 Uniform JS 设置表单元素的样式

Question

我正在尝试学习 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/

Answer 1

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

要解决这个问题，而不是通常应用 uniform 插件，将初始化逻辑移动到您的 checkedUniform init 函数中（一旦绑定应用于元素，即使该元素是由 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.