Knockout ObservableArray - 如何将 Kendo 小部件应用于新实例答案

【问题标题】：Knockout ObservableArray - How to apply Kendo widget to new instancesKnockout ObservableArray - 如何将 Kendo 小部件应用于新实例
【发布时间】：2013-10-31 15:33:56
【问题描述】：

我是 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>

虚拟机

<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>

提前致谢

【问题讨论】：

标签： knockout.js kendo-ui

【解决方案1】：

这是因为

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

仅对应用时页面中存在的输入运行。

我建议将它移动到自定义绑定（kendo-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());

【讨论】：