Question

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

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之前在.uniform()上调用$("input")，则不是input s ：页面上唯一的输入是由三个输入生成的模板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

您还可以更改绑定以获取更多参数，并开始像这样调用它：

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

这是一个proof of concept，但您还应该检查this answer，以便更好地实现将这些选项传递给绑定。

所有这些的优势在于你可以从视图模型中引导统一的行为，从而使一切变得更加可测试。

PS。另一种可能适用的替代方法是使用template绑定的afterRender位。

为什么我们不能在applyBindings（）之前调用uniform（）？

1 个答案: