La liaison MVVM à une grille de Kendo est TRÈS lente?

Question

J'essaye de lier un ViewModel à une source de données de Kendo qui à son tour est donnée à une grille de Kendo. Rien de trop chic à ce stade.

Cela fonctionne en quelque sorte mais est très lent! J'ai une alerte m'informant que j'ai reçu mes données json (700 lignes) en 2 secondes, mais cela prend environ 15 secondes pour mettre à jour le viewmodel.

Qu'est-ce que je fais mal?

Merci

$(document).ready(function() { 

     // create the viewmodel we use as the source for the list 
     var viewModel = kendo.observable({ 
      items: [], 
      total: function() { 
       return this.get("items").length; 
      } 
     }); 

     var dataSource2 = new kendo.data.DataSource({ 
      data: viewModel, 
      pageSize: 50 
     }); 

     // create the grid 
     $("#grid").kendoGrid({ 
      dataSource: dataSource2, 
      height: 500, 
      scrollable: { 
       virtual: true 
      }, 
      columns: [ 
       { field: "ID_ORDER", title: "ID", width: 80 }, 
       { field: "CREATION_DATE", title: "Creation Date" }, 
       { field: "STATUS", title: "STATUS", width: 80 }, 
       ** more columns (around 10) ** 
      ] 
     }); 

     // pass this on to initialise 
     APPS.View.Orders.Initialise(viewModel); 

    }); 

Puis dans mon tapuscrit je traite l'appel INITIALISATION où le viewmodel est passé dans:

module APP.View.Orders { 

     export var _Scope: string = "Orders"; 
     var _viewModelOrders: any; 

     export var Initialise = function (viewModelOrders: any) { 

      _viewModelOrders = viewModelOrders; 

      var orderdetails = { 
       userid: APP.Core.userID, 
       context: "DEAL" 
      }; 

      // retrieve all orders 
      $.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) { 

       try { 

        alert("item count (1): " + mydata.length); 

        jQuery.each(mydata, function() { 

         var newItem = this; 
         _viewModelOrders.items.push(newItem); 

        }); 

        alert("item count (2): " + _viewModelOrders.items.length); 

       } 
       catch (e) { 
        alert(e.message); 
       } 
      }); 
     } 
} 

Answer 1

Essayez de construire le tableau de l'article et puis attribuez-lui dans le modèle.

Quelque chose comme:

// retrieve all orders 
$.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) { 
    try { 
     alert("item count (1): " + mydata.length); 
     var items = []; 
     jQuery.each(mydata, function() { 
      items.push(this); 
     }); 
     _viewModelOrders.items = items; 
     alert("item count (2): " + _viewModelOrders.items.length); 
    } 
    catch (e) { 
     alert(e.message); 
    } 
}); 

Answer 2

Vous pouvez suspendre temporairement l'observable en procédant comme suit:

$.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) { 
    try { 
     var simpleArray = viewModel.items(); // get a reference to the underlying array instance of the observable 
     jQuery.each(mydata, function() { 
      items.push(this); 
     }); 

     viewModel.items.valueHasMutated(); // let the observable know it's underlying data has been updated 
    } 
    catch (e) { 
     alert(e.message); 
    } 
} 

Faire la technique ci-dessus améliore considérablement les temps de chargement. J'ai testé ce chargement de quelques milliers de lignes dans un délai raisonnable.

Answer 3

Pour expliquer plus loin, cela est dû à la ligne:

_viewModelOrders.items.push(newItem); 

Chaque fois que vous appuyez sur un élément dans le tableau, il déclenche un événement change, qui voit la grille et se met à jour. Donc, si vous poussez 700 éléments, vous obligez réellement la grille à mettre à jour le DOM 700 fois.

Il serait préférable de regrouper tous les éléments dans un tableau, puis attribuez-lui le tableau à la source de données, avec quelque chose comme:

$.getJSON("/api/omsapi/GetOrders", orderdetails, function (mydata) { 
    datasource2.data(mydata);