Question

我是剑道新手，并且在将小部件应用于动态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");

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

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

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

1 个答案: