Knockout Kendo Grid dataBound события

Question

У меня есть сетка кендо с использованием набора нокаут-кендо.

У меня есть несколько пользовательских кнопок в одном столбце сетки, то есть, чтобы сделать ajax-вызов для редактирования записи в другом div, удалить одну или проверить editId для вызова функции. Моя проблема в том, что оба события сработали дважды! К тому же для меня это выглядит dataBound событие и dataBinding событие то же самое.

Вот скрипка

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

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

Я попробовал несколько разных подходов.

Вот еще одна скрипка

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.applyBindings(new ViewModel()); инициализирует объект и запускает событие. После этого событие запускается снова, когда кендо пытается внутренне связать данные элементов.

Чтобы избежать этого, см.: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

Где вы могли бы использовать что-то похожее на:

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

Когда начальная привязка конфигурации установлена ​​на autoBind: false

Чтобы случайно не перехватить это первое ложное событие dataBound.

Если у меня будет время, я вернусь с JSFiddle, который демонстрирует это.

Решение 1: Эта скрипка должна помочь.

Решение 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');
    },
};