javascript - Knockout Kendo Grid 数据绑定(bind)事件

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');
    },
};

绑定(bind)网格和数据时会触发事件。但是，当所有数据都存在时，我如何确定只获取一个事件？

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

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 (相同元素)

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

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

要避免这种情况，请参阅: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();

当初始配置绑定(bind)设置为 autoBind: false 时

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

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

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

解决方案 2:

设置autoBind: false这样网格就不会自动绑定(bind)。 (@jason9187)

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

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

<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/