Aurelia-Kendoグリッド - ボタンクリックでデータを取得する方法

Question

ボタンをクリックしてグリッドのデータを取得しようとしています。私は唯一の2回目のクリックの後に、ボタンのクリックでデータを取得

<ak-grid k-data-source.bind="datasource" view-model.ref="gridVM"> 
     <ak-col k-title="Public Id" k-field="publicId"></ak-col> 
     <ak-col k-title="Payment Type" k-field="paymentType"></ak-col> 
     <ak-col k-title="Initiated" k-field="initiated"></ak-col> 
     <ak-col k-title="Completed" k-field="completed"></ak-col> 
     <ak-col k-title="Result" k-field="result"></ak-col> 
     <ak-col k-title="State" k-field="state"></ak-col> 
     <ak-col k-title="Total" k-field="total"></ak-col> 
     <ak-col k-title="User Reference" k-field="userReference"></ak-col> 
    </ak-grid> 

    <br /> 
    <button ak-button="k-icon: ungroup; k-widget.bind: button" k-on-click.delegate="GetTransaction()">Get Transactions</button> 

これは、ファイルのviewmodel（TS）である

export class Test{ 
    gridVM; 
    datasource; 

    GetTransaction() { 
     this.datasource = new kendo.data.DataSource({ 
      type: "json", 
      transport: { 
       read: { 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "api/getTransaction" 
       }, 
       parameterMap(data, operation) { 
        if (data.models) { 
         return JSON.stringify({ products: data.models }); 
        } else if (operation === "read") { 
         return JSON.stringify(data); 
        } 
       } 
      }, 
      schema: { 
       data: "data", 
       total: "total", 
       aggregates: "aggregates" 
      }, 

      pageSize: 5 
     }) 
     this.gridVM.recreate(); 
    } 
} 

： は、これは私のグリッドとボタンです。それは私には、私は前の要求からデータを取得するようだ。 pazeSizeを変更した場合、2回目のクリック後にのみ別のレコード数が表示されます。

自分のネットワーク（デバッグ用）を確認しましたが、最初のクリック後にはgetTransactionが表示されていません。

最初のボタンをクリックした後に修正して正しいデータを取得する方法を教えてください。

ありがとうございます。

Answer 1

今は、ボタンをクリックするたびにデータソースを再作成しています。データソースのポイントは、それを一度作成し、データソース上の提供されたメソッドを呼び出して更新することです。 また、データを取得する際にグリッド全体を再作成する必要がなく、データバインディングの目的を無効にする、まれにrecreate（）機能を使用するようにしてください。

<ak-grid k-data-source.bind="datasource" view-model.ref="gridVM"> 
     <ak-col k-title="Public Id" k-field="publicId"></ak-col> 
     <ak-col k-title="Payment Type" k-field="paymentType"></ak-col> 
     <ak-col k-title="Initiated" k-field="initiated"></ak-col> 
     <ak-col k-title="Completed" k-field="completed"></ak-col> 
     <ak-col k-title="Result" k-field="result"></ak-col> 
     <ak-col k-title="State" k-field="state"></ak-col> 
     <ak-col k-title="Total" k-field="total"></ak-col> 
     <ak-col k-title="User Reference" k-field="userReference"></ak-col> 
    </ak-grid> 

    <br /> 
    <button ak-button="k-icon: ungroup; k-widget.bind: button" k-on-click.delegate="datasource.fetch()">Get Transactions</button> 

見ての通り、あなたがやりたいすべてがちょうど

export class Test{ 
    gridVM; 
    datasource; 

    constructor() { 
     this.datasource = new kendo.data.DataSource({ 
      type: "json", 
      transport: { 
       read: { 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "api/getTransaction" 
       }, 
       parameterMap(data, operation) { 
        if (data.models) { 
         return JSON.stringify({ products: data.models }); 
        } else if (operation === "read") { 
         return JSON.stringify(data); 
        } 
       } 
      }, 
      schema: { 
       data: "data", 
       total: "total", 
       aggregates: "aggregates" 
      }, 

      pageSize: 5 
     }); 
    } 
} 

あなたのデータソースにフェッチ（）メソッドを呼び出して、いくつかのデータをフェッチした場合、あなたも、VMのメソッドを作成する必要はありません。データソース宣言をコンストラクタに移動します。