Aurelia 出现 jquery 数据表使用错误

Question

我在与 Aurelia 一起使用 jquery 数据表时遇到问题。我正在尝试导入数据表，但没有成功。当我尝试初始化它时，它给我错误

Unhandled promise rejection TypeError: $(...).dataTable is not a function(…)

我的打字稿代码如下：

import * as $ from 'jquery';
import * as dataTable from 'datatables';
export class App {
router: Router;

constructor() {}
attached() {
    $('#example').dataTable({
        "paginate": true,
        "pageLength": 25
    });
} 
 activate() {  
    console.log("app.activate");
}....

有什么指点吗？干杯:)

Answer 1

这里有几个问题会让您头疼。

首先，jQuery导出一个默认变量$。因此，您可以执行以下操作以在 ViewModel 中导入 jQuery：

import 'jquery';

其次，DataTables 插件扩展了 jQuery 的库原型，将其自身添加到 jQuery 对象中。因此，要使其正常工作，您需要先包含 jQuery，然后再包含 DataTables 插件。

我看不到客户端使用的默认导出，所以这应该为您提供以下功能代码：

import 'jquery';
import 'datatables';

除非我忽略了一个特定的细节，否则我相信这应该可以解决问题。如果没有，请在下面发表评论，我们将以任何一种方式对其进行排序。

Answer 2

[已解决] 我通过在 activate() 方法中初始化数据表并将导入保持原样来使其工作...

activate() {  
   datatable();
   console.log("app.activate");
}....

进一步尝试，发现这也有效...

import * as $ from 'jquery';
import "datatables";
//import * as dataTable from "datatable";

export class DatatablesExample {    
   //activate() {
   //    dataTable();
   //}
    attached() {
        $('#example').dataTable();
    }
}

一直以来我的问题是导入 jQuery。但我想知道为什么推荐的导入不适用于 jquery...

import $ from 'jquery';

Aurelia 出现 jquery 数据表使用错误

Aurelia with jquery datatables usage error

javascript

jquery

datatables

aurelia

jspm