Почему мы не можем называть форму() перед applyBindings()?

Question

Когда мы используем нокаут с 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

Нокаут динамически создает input и добавляет их в DOM. Единый плагин может работать только с существующими элементами. Если вы позвоните по номеру .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. Один из вариантов, который также может быть применим, заключается в использовании afterRender бит связывания template.