在Knockout模板中使用Uniform JS進行表格元素的初始化

Question

我想要學習使用jQuery插件Uniform JS進行樣式化的相當複雜的動態表單，同時學習Knockout。由於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初始化函數（它將運行一旦綁定應用於即使元素剛剛被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。