当我们在UniformJS中使用Knockout并在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实时发布的问题.

解决方法:

淘汰赛可动态创建输入并将其添加到DOM.统一插件只能在现有元素上使用.如果在applyBindings之前在$(“ input”)上调用.uniform(),则没有输入：页面上唯一的输入是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位.