Knockout ObservableArray - 如何將Kendo小部件應用到新實例

Question

我是Kendo的新手，並且遇到了將小部件應用到動態KO數組的問題。我有一個可觀察數組加載一組初始元素，並允許通過樣式將kendoNumericTextBox應用於每個框。然而，在向數組添加元素之後，Kendo小部件不再顯示。我創建了一個顯示行爲的小提琴。

http://jsfiddle.net/fiddlesticks66/WekFG/

查看

<code> 
    <div data-bind="foreach:rows"> 
     <input class="percentage" data-bind="value:percent" /> 
    </div>  
    <button data-bind="click:addRow">add row</button> 

</code> 

VM

<code> 
    function newVM(){ 
     self=this; 
     self.rows = ko.observableArray([ 
      { percent: 0 }, 
      { percent: 0.25 }, 
      { percent: 0.50 } ]); 

     self.addRow = function(){ 
      this.rows.push({percent:0}); 
     }; 
     return self; 
    } 
</code> 

JS申請劍道

<code> 
    $(".percentage").kendoNumericTextBox({ 
       format: "p0", 
       min: 0, 
       max: 1, 
       step: 0.25 
      }).data("kendoNumericTextBox"); 
</code> 

在此先感謝

Answer 1

這是因爲

$(".percentage").kendoNumericTextBox({ 
      format: "p0", 
      min: 0, 
      max: 1, 
      step: 0.25 
     }).data("kendoNumericTextBox"); 

只運行在應用它存在於頁的輸入。

我建議將它移動到自定義綁定（劍道的UI可能已經有一個自定義進行裝訂），這樣（更新小提琴：http://jsfiddle.net/WekFG/3/）：

HTML：

<div data-bind="foreach:rows"> 
    <input class="percentage" data-bind="value:percent, applyKendo:{}" /> 
</div>  
<button data-bind="click:addRow">add row</button> 

JS：

function newVM(){ 
    self=this; 
    self.rows = ko.observableArray([ 
     { percent: 0 }, 
     { percent: 0.25 }, 
     { percent: 0.50 } ]); 

    self.addRow = function(){ 
     this.rows.push({percent:0}); 
    }; 
    return self; 
} 

ko.bindingHandlers.applyKendo = { 
    init:function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
     $(element).kendoNumericTextBox({ 
      format: "p0", 
      min: 0, 
      max: 1, 
      step: 0.25 
     }).data("kendoNumericTextBox"); 
    } 
} 

ko.applyBindings(new newVM());