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是一个长度为3的数组，包含以下项目：{ 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应有所帮助。

解决方案2：

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

或者通过在第二种方法中添加相同的属性。

小提琴：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');
    },
};

Knockout Kendo Grid dataBound事件

2 个答案: