javascript - 为什么我们不能在 applyBindings() 之前调用 uniform()？

Question

当我们将 Knockout 与 UniformJS 一起使用并在 ko.applyBindings 之前调用 .uniform() 时，下面的代码不起作用？

HTML代码:

<div id="myContainer">
    <div data-bind="foreach: teste">
        <input type="checkbox" value="" /> My checkbox
    </div>
</div>

Javascript 代码:

$("input").uniform();    // Call here... does not work!
function vm() {
    var that = this;

        this.teste = ko.observableArray([
            { id: 1, 'value': '1' },
            { id: 2, 'value': '2' },
            { id: 3, 'value': '3' },
        ]);    
}

ko.applyBindings(vm());
//$("input").uniform();    // Call here... works fine!!!

但是，如果我们在 ko.applyBindings 之后调用它，一切正常。这是为什么？

在 this JSFiddle 中实时查看问题.

Answer 1

Knockout 动态创建 input 并将它们添加到 DOM。统一插件只能在现有元素上工作。如果您在 applyBindings 之前在 $("input") 上调用 .uniform()，则没有input:页面上唯一的输入是 KO 生成的三个输入的模板。

我建议你使用 custom binding handler处理这个任务:

ko.bindingHandlers.uniform = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).uniform();
    }
};

可以这样使用:

<input type="checkbox" value="" data-bind="uniform" /> My checkbox

您还可以更改绑定(bind)以接收更多参数并像这样开始调用它:

<input type="checkbox" value="" data-bind="uniform: { wrapperClass: 'myClass' }" /> 

这是一个 proof of concept , 虽然你也应该检查 this answer以更稳健的方式实现将类似的选项传递给您的绑定(bind)。

所有这一切的额外优势是您可以从您的 View 模型中控制 uniform 的行为，这反过来又使一切更易于测试。

---

附言。一种可能也适用的替代方法是使用 template 的 afterRender 位绑定(bind)。