Aurelia：使用DataTables jQuery插件時數據在表中消失

Question

我使用jQuery數據表插件（ https://datatables.net/ ）。

您可以在html表中使用它，如下所示：

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

如果我的View中有一個普通的html表，並在我的視圖模型的attached()方法中調用以上內容，則一切正常。

但是，當我嘗試從我從API獲取的數據生成表時，這樣做會出錯。

該表已生成，但在其下而不是說“顯示93個條目中的0至10個”，而是說“顯示0個條目中的0至0個”。 另外，如果我嘗試按給定的列對表進行排序，那么所有數據都會消失，僅留下列標題。

更新：我不使用任何Ajax調用來對表進行排序。 我從服務器獲取的數據創建表。 詳細說明：我從服務器獲取json對象。 使用json對象通過“ repeat.for ='row of tableData'”構建表。 在附加的掛鈎中調用.DataTable（）會產生問題。 我嘗試創建一個簡單的按鈕，當單擊該按鈕時調用.DataTable（）方法。 它可以正確構造表。 在Attached（）掛鈎中調用它似乎是一個問題

Answer 1

我同意MJ，但您可能會在計時問題上犯規。

Aurelia使用異步綁定系統，該系統將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
    });
  }
}

Answer 2

您將要為DataTable對象創建一個自定義元素 。 您最有可能想要在傳遞數據的DataTable元素上使用自定義綁定 。 最后，您將要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。 它可能未設計為處理來自服務器的新數據。 我將其留給讀者。