淘汰赛剑道网格数据绑定事件

Question

我有一个使用 knockout-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');
    },
};