grille Aurelia-Kendo - une demande multiple inutile datasource

Question

J'ai la page html suivante: (partie de la page)

<ak-multiselect k-data-text-field="text" 
    k-data-value-field="value" k-value.two-way="selectPaymentType" k-data-source.bind="dataPaymentType" 
</ak-multiselect> 
<br/> 
<ak-multiselect k-data-text-field="text" 
    k-data-value-field="value" k-value.two-way="selectPaymentResult" k-data-source.bind="dataPaymentResult" 
</ak-multiselect> 
<br/> 
<button ak-button="k-icon: ungroup; k-widget.bind: button" k-on-click.delegate="GetTransaction()">Get Transactions</button> 
<br/> 
<div ref="gridTransaction"></div> 

Ceci est mon viewmodel:

export class Transaction { 
    selectPaymentType; 
    selectPaymentResult; 
    gridTransaction; 

    dataPaymentType = [ 
    { text: 'Mobile Payment', value: '0' }, 
    { text: 'Card Present Payment', value: '1' }, 
    { text: 'Cash Payment', value: '2' } 
    ] 

    dataPaymentResult = [ 
    { text: 'Pending', value: '0' }, 
    { text: 'Approved', value: '1' }, 
    { text: 'Declined', value: '2' } 
    ] 

    buildTransactionFilters() { 
     var filtersTotal = []; 

     var filtersPaymentType = []; 
     var selectPaymentType = this.selectPaymentType; 
     if (selectPaymentType != null && selectPaymentType.length > 0) { 
      selectPaymentType.forEach(function (item, i, dataItems) { 
       filtersPaymentType.push({ 
        field: "paymentType", 
        operator: "eq", 
        value: item 
       }); 
      }); 
     } 
     var filterPaymentType = { 
      logic: "or", 
      filters: filtersPaymentType 
     }; 

     var filtersPaymentResult = []; 
     var selectPaymentResult = this.selectPaymentResult; 
     if (selectPaymentResult != null && selectResult.length > 0) { 
      selectPaymentResult.forEach(function (item, i, dataItems) { 
       filtersPaymentResult.push({ 
        field: "result", 
        operator: "eq", 
        value: item 
       }); 
      }); 
     } 
     var filterPaymentResult = { 
      logic: "or", 
      filters: filtersPaymentesult 
     }; 

     if (filtersPaymentType.length > 0) 
      filtersTotal.push(filterPaymentType); 
     if (filtersPaymentResult.length > 0) 
      filtersTotal.push(filterPaymentResult); 
     return { 
      logic: "and", 
      filters: filtersTotal 
     }; 
    } 

    GetTransaction() { 
     var filters = this.buildTransactionFilters(); 
     var datasourceTransaction = new kendo.data.DataSource({ 
      type: "json", 
      transport: { 
       read: { 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "api/getTransaction", 
        cache: false 
       }, 
       parameterMap(data, operation) { 
        if (data.models) { 
         return JSON.stringify({ products: data.models }); 
        } else if (operation === "read") { 
         return JSON.stringify(data); 
        } 
       } 
      }, 
      filter: filters, 
      schema: { data: "data", total: "total", aggregates: "aggregates"}, 
      serverPaging: true, 
      serverSorting: true, 
      serverFiltering: true, 
      pageSize: 10 
     }) 

     var $grid = $(this.gridVM).kendoGrid({ 
      dataSource: datasourceTransaction, 
      pageable: { refresh: true, pageSizes: true, buttonCount: 5 }, 
      scrollable: true, 
      sortable: true, 
      columns: [{ field: "publicId", title: "Public Id", filterable: false}, 
       { field: "initiated", title: "Initiated", filterable: false, type: "datetime"}, 
       {field: "total", title: "Total", filterable: false} 
      ] 
     }).data("kendoGrid"); 
    } 
} 

choisir le filtrage nécessaire , appuyez sur le bouton et voir les données correctes. Puis je change de filtre et j'appuie sur le bouton - les données sont à nouveau correctes. Mais si je change le numéro de page ou le numéro d'enregistrement sur le compte, je peux voir dans le réseau tous mes demandes précédentes. Comme résultat - je vois dans la grille la réponse plus rapide de mes demandes précédentes (avec différents filtres). Quantité de demandes précédentes - combien de fois j'ai cliqué sur le bouton.

Comment je peux le réparer et obtenir des données uniquement à partir de la dernière demande?

Answer 1

Utilisez ak-grid pour votre grille et ne l'initialisez pas de la manière jquery. Jetez un oeil à la documentation: https://aurelia-ui-toolkits.github.io/demo-kendo/#/samples/grid-basic-use

Définissez la source de données dans votre viewmodel une fois au lieu d'en créer une nouvelle après chaque clic sur le bouton. Changez simplement le filtre de dataSource dans votre méthode getTransactions (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter)