Knockout Kendo Grid dataBound events

Question

Ho una griglia di kendo ui usando il set knockout-kendo.

Ho alcuni pulsanti personalizzati in una colonna della griglia, ad esempio per effettuare una chiamata ajax per modificare una voce in un altro div, eliminarne uno o cercare un editId per chiamare una funzione. Il mio problema è, , che entrambi gli eventi hanno sparato due volte! Inoltre per me sembra che l'evento dataBound e l'evento dataBinding coincidano.

Heres un fiddle

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

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

Ho provato alcuni approcci diversi.

Heres un altro fiddle

this.gridConfig = { 
    data: self.myData, 
    datasource: { 
     data: 'data' 
    }, 
    dataBound: function(){ 
     alert('dataBound'); 
    }, 
    dataBinding: function(){ 
     alert('dataBinding'); 
    }, 
}; 

eventi vengono generati quando la griglia è legato, e quando i dati è legato. Ma come posso essere sicuro di ottenere solo un evento quando ci sono tutti i dati?

Qualcuno sa cosa sta succedendo lì? BTW io uso il plugin di mappatura.

Answer 1

L'evento dataBound viene attivato per motivi diversi. La prima volta che viene generato, se console.log() l'evento, si vedrà che:

• e.sender._data è un array vuoto []
• e.element[0] è div.k-grid.k-widget

Quando l'evento per la seconda volta, le stesse proprietà mostrano:

• e.sender._data è un array di lunghezza tre, c articoli ontaining come: { color: "green", name: "apple", uid: "..." }
• e.element[0] è div.k-grid.k-widget (stesso elemento)

che sembra implicare che la griglia è in realtà i dati di legame a se stesso due volte.

Se ho dovuto indovinare, ko.applyBindings(new ViewModel()); di KO inizializza l'oggetto e attiva l'evento. Successivamente, l'evento viene attivato nuovamente quando il kendo tenta di legare internamente i dati degli elementi.

Per evitare questo, si veda: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

Dove si potrebbe impiegare qualcosa di simile a:

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

Quando la configurazione iniziale di legame è impostato su autoBind: false

In modo che non lo fai accidentalmente catch that first false dataBound event.

Se ho tempo, tornerò con un JSFiddle a dimostrarlo.

Soluzione 1: Questo Fiddle dovrebbe essere d'aiuto.

Soluzione 2:

impost autoBind: false in modo che la griglia non auto-bind. (@ Jason9187)

Come un altro utente ha citato, è possibile attivare l'iniziale auto-intrecciare modificando un'impostazione che viene menzionato nella documentazione Telerik sopra:

In sostanza, questa correzione nel vostro primo approccio:

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound }"></div>

diventa:

<div id="grid" data-bind="kendoGrid: { data: myData, dataBinding: dataBinding, dataBound: dataBound, autoBind: false }"></div>

O aggiungendo la stessa proprietà al tuo secondo approccio.

Fiddle: http://jsfiddle.net/hXn7e/45/

Answer 2

Impostare autoBind: false in modo che la griglia non auto-bind.

this.gridConfig = { 
    data: self.myData, 
    autoBind : false, 
    datasource: { 
     data: 'data' 
    }, 
    dataBound: function(){ 
     alert('dataBound'); 
    }, 
    dataBinding: function(){ 
     alert('dataBinding'); 
    }, 
};