События Knockout Kendo Grid dataBound

У меня есть сетка пользовательского интерфейса кендо, использующая набор knockout-kendo.

У меня есть несколько пользовательских кнопок в одном столбце сетки, т.е. чтобы сделать вызов 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');
    },
};

События запускаются при привязке сетки и при привязке данных. Но как мне быть уверенным, чтобы получить только Event, когда все данные есть?

Кто-нибудь знает, что там происходит? Кстати, я использую плагин сопоставления.


javascript kendo-ui knockout.js knockout-kendo
person chris    schedule 07.08.2015    source источник
comment
Я разместил ответ ниже. Это немного меняет формат вашего кода, чтобы достичь того, чего вы хотите. Если у вас есть какие-либо конкретные вопросы о том, как заставить его работать в вашей текущей настройке, сообщите мне об этом.   -  person Daniel Brown    schedule 25.09.2015

Ответы (2)


arrow_upward
10
arrow_downward

Событие dataBound срабатывает по разным причинам. При первом запуске, если вы console.log() событие, вы увидите, что:

  • e.sender._data — пустой массив []
  • e.element[0] is 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#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)

Как упомянул другой пользователь, вы можете отключить первоначальную автоматическую привязку, изменив параметр, упомянутый в приведенной выше документации по телерику:

По сути, это исправление в вашем первом подходе:

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

person Daniel Brown    schedule 24.09.2015
comment
Хорошо, большое спасибо за это! Настройка у меня очень сложная, в файле получилось около 1600 строк... Но на самом деле кажется, что простая строчка *autoBind:false* исправит мою проблему... - person chris; 01.10.2015

arrow_upward
5
arrow_downward

Установите autoBind: false, чтобы сетка не привязывалась автоматически.

this.gridConfig = {
    data: self.myData,
    autoBind : false,
    datasource: {
        data: 'data'
    },
    dataBound: function(){
        alert('dataBound');
    },
    dataBinding: function(){
        alert('dataBinding');
    },
};
person ryuu9187    schedule 01.10.2015
comment
просто, но, кажется, решить эту проблему! Извини за это :-/ - person chris; 01.10.2015
comment
это все о обмене информацией и помощи друг другу :) - person ryuu9187; 02.10.2015