Aurelia：DataTables jqueryプラグインを使用するとテーブル内のデータが消えます

Question

jQueryデータテーブルプラグイン（https://datatables.net/）を使用しています。

次のようなHTMLテーブルの上にそれを使用することができます。

$("#table").DataTable(); 

私は私の見解では、通常のHTMLテーブルを持っているし、すべてが正常に動作します私の見解モデルのattached()方法で上記を呼び出す場合。

しかし、APIから取得したデータからテーブルを生成するときに、これを実行しようとすると問題が発生します。

テーブルが生成されますが、テーブルが生成されますが、「93エントリのうち0〜10を表示しています」のようなものではなく、「0エントリの0〜0を示しています」と表示されます。また、指定された列で表をソートしようとすると、すべてのデータが消え、列見出しだけが残ってしまいます。

更新： 私はテーブルのソートにAjaxコールを使用しません。自分のサーバーから取得したデータからテーブルを作成します。具体的には：サーバーからjsonオブジェクトを取得します。 jsonオブジェクトを使用して、 "repeat.for = 'row of tableData'"を使用してテーブルを構築します。接続されたフックで.DataTable（）を呼び出すと、問題が発生します。クリックしたときに.DataTable（）メソッドを呼び出す単純なボタンを作成しようとしました。テーブルを適切に構築します。添付された（）フックで呼び出す際の問題のようです。

Answer 1

DataTableオブジェクトにはcustom elementを作成します。あなたは、データを渡すDataTable要素にcustom bindingを使用する可能性が最も高いです。最後に、rowsバインディングの "valueChanged"コールバックで、DataTableプラグインで何らかのリフレッシュまたはティアダウン/ビルドアップ関数を呼び出すことになります。

dataTable.js

@inject(Element) 
export class DataTableCustomElement { 

    element; 
    @bindable rows; 

    constructor(Element) { 
     this.element = $(Element); 
    } 

    rowsChanged(newValue, oldValue) { 
     this.element.DataTable.refresh(); // or whatever it is 
    } 
} 

view.html

<data-table rows.bind="data.rows"></data-table> 

私はあなたのDataTableのAPIについては何も知りません。サーバーからの新しいデータを処理するように設計されていない可能性があります。私はそれを読者に任せます。

Answer 2

私はMJに同意しますが、タイミングの問題で倒れている可能性があります。

アウレリアパフォーマンス上の理由から、バッチそれらに順番にマイクロタスクキューにDOMの更新をキューに非同期バインディングシステムを使用しています（それはとても速いです理由です）

あなたは理論的には任意の繰り返しを許可する必要があり、以下を試みることができますデータテーブルが初期化される前に処理されるバインディング

import {TaskQueue} from 'aurelia-framework'; 

@inject(Element, TaskQueue) 
export class DataTables { 
    constructor(element, taskQueue) { 
    this.element = element; 
    this.taskQueue = taskQueue; 
    } 

    attached() { 
    this.taskQueue.queueMicroTask(() => { 
     // Init data tables here 
    }); 
    } 
}