1

我正在使用 RPNiemeyer 的 kendo-knockout 库。我有一个剑道网格，里面有一个剑道模板。在模板中有一个使用敲除单击绑定的按钮，该按钮调用更改视图模型的方法。重现步骤：

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

注意：如果您删除更改视图模型属性的行，则一切正常。

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

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/

4

1 回答 1

4

此时不完全支持在网格内使用 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/

于 2012-12-13T15:34:49.590 回答