Question

我正在使用RPNiemeyer的kendo-knockout库。我有一个带有剑道模板的剑道网格。在模板中有一个按钮，它使用敲击点击绑定调用一个更改viewModel的方法。重现的步骤：

点击网格中的按钮。
调用一个方法来更改viewModel的属性并提醒新值。
再次点击该按钮。该按钮不再起作用。

注意：如果删除更改viewmodel属性的行，则一切正常。

请解释为什么这不起作用的原因，任何想法和解决方案将不胜感激。谢谢！

HTML：

<div id="grid"  data-bind="kendoGrid: { data: fruits, columns: [ 
            {
                field: 'name',
                title: 'Fruit',
                width: 50
            },
            {
                template: '<button class=\'k-button\' data-bind=\'click: function() { changeFruit() }\' >Change Fruit Name</button>',
                width: 30
            }               

         ], 
        scrollable: false, sortable: true, pageable: false }" style="height: 380px">
    </div>

的javascript：

var ViewModel = function() {
    this.fruit1 = {
        color: ko.observable("green"),
        name: ko.observable("apple"),
    };

    this.fruit2 = {
        color: ko.observable("orange"),
        name: ko.observable("orange"),
    };


    this.fruits = ko.observableArray([
        this.fruit1, 
        this.fruit2
    ]);

    this.changeFruit = function() {
        // this line breaks the binding, 
        // when You change the property of the viewModel
        // You cannot call this function any more
        this.fruits()[0].name("Test");
        alert(this.fruits()[0].name());
    }
};

ko.applyBindings(new ViewModel());

http://jsfiddle.net/hXn7e/25/

Answer 1

此时不完全支持在网格内使用Knockout模板。现在你的行是绑定的，因为当Knockout首次遍历文档以应用绑定时，元素就在那里。

更新数据后，将重新呈现行，并且绑定将丢失。

一个修复方法是为重新绑定表的“dataBound”事件使用事件处理程序。这可以在全球范围内完成，例如：

ko.bindingHandlers.kendoGrid.options.dataBound = function(data) {
    var body = this.element.find("tbody")[0];

    if (body) {
       ko.applyBindings(ko.dataFor(body), body);   
    }
};

以下是一个示例：http://jsfiddle.net/rniemeyer/5Zkyg/

我还添加了一个自定义绑定，阻止Knockout在第一次传递时绑定表，因此它不会被绑定两次（一次整个applyBindings，一次来自dataBound处理程序。

最终，我希望在Knockout-Kendo中更好地支持这一点，这是我计划在图书馆工作的下一步。

以下是我在一段时间内开始的分支机构如何工作的示例：http://jsfiddle.net/rniemeyer/xBL2B/

Kendo-Knockout：调用一个方法，在网格中使用数据绑定从模板中更改viewmodel属性，打破绑定

1 个答案: