淘汰赛 Kendo 网格数据绑定事件

Question

我有一个使用 knockout-kendo 集的 kendo ui 网格。

我在网格的一列中有几个自定义按钮，即进行 ajax 调用以编辑另一个 div 中的条目，删除一个或检查 editId 以调用函数.我的问题是，两个事件都触发了两次！此外对我来说 dataBound 事件和 dataBinding 事件看起来是一样的。

这是一个fiddle

this.dataBound = function(){
    alert('dataBound');
};

this.dataBinding = function(){
    alert('dataBinding');
};

我尝试了一些不同的方法。

还有一个fiddle

this.gridConfig = {
    data: self.myData,
    datasource: {
        data: 'data'
    },
    dataBound: function(){
        alert('dataBound');
    },
    dataBinding: function(){
        alert('dataBinding');
    },
};

绑定网格和绑定数据时会触发事件。但是我怎样才能确定，当所有数据都存在时只获得一个事件？

有人知道那里发生了什么吗？顺便说一句，我使用映射插件。

Answer 1

dataBound 事件因不同原因而触发。第一次触发时，如果你 console.log() 事件，你会看到：

e.sender._data 是一个空数组 []
e.element[0] 是 div.k-grid.k-widget

当事件第二次触发时，相同的属性显示为：

e.sender._data 是一个长度为三的数组，包含如下项目：{ color: "green", name: "apple", uid: "..." }
e.element[0] 是 div.k-grid.k-widget（相同的元素）

这似乎暗示您的网格实际上将数据绑定到自身两次。

如果非要我猜的话，KO 的 ko.applyBindings(new ViewModel()); 会初始化对象并触发事件。之后，当 kendo 尝试在内部绑定元素数据时再次触发该事件。

要避免这种情况，请参阅：http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

您可以在哪里使用类似于：

var grid = $("#grid").data("kendoGrid");
grid.bind("dataBinding", grid_dataBinding);
grid.dataSource.fetch();

当初始配置绑定设置为 autoBind: false

这样你就不会不小心捕捉到第一个 false dataBound 事件。

如果我有时间，我会用一个 JSFiddle 来证明这一点。

解决方案 1： 这个 Fiddle 应该有帮助。

方案二：

设置autoBind: false 使网格不自动绑定。 (@jason9187)

正如另一位用户提到的，您可以通过更改上述 telerik 文档中提到的设置来关闭初始自动绑定：

基本上，您的第一种方法中的此修复：

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound }"></div>

变成：

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound, autoBind: false }"></div>

或者将相同的属性添加到第二种方法。

Fiddle: http://jsfiddle.net/hXn7e/45/

Answer 2

设置autoBind: false使网格不自动绑定。

this.gridConfig = {
    data: self.myData,
    autoBind : false,
    datasource: {
        data: 'data'
    },
    dataBound: function(){
        alert('dataBound');
    },
    dataBinding: function(){
        alert('dataBinding');
    },
};

淘汰赛 Kendo 网格数据绑定事件

Knockout Kendo Grid dataBound events

javascript

kendo-ui

knockout.js

knockout-kendo