Question

我正在尝试在Aurelia应用程序中使用Datatables.net库。

https://www.npmjs.com/package/datatables.net

问题是以下代码适用于Aurelia的Webpack版本。 JSPM构建我得到了错误

mytable.js：13 Uncaught（在promise中）TypeError：$（...）。dataTable不是附加的函数（...）@ mytable.js：13attached @ aurelia-templating.js：2947附加@ aurelia-templating。 js：1016附近@ aurelia-templating.js：1472附近@ aurelia-templating.js：1026附近@ aurelia-templating.js：1472（匿名函数）@ aurelia-framework.js：204

我在我的package.json中添加了"datatables.net": "npm:datatables.net@^1.10.11",并且jspm install -y和datatables.net被称为已安装。

ViewModel：

import $ from 'jquery';
import dataTable from 'datatables.net';
export class MyTable{
  dataSet = [
      ['Ken','Husband','Home'],
      ['Barbie','Wife','Home']
    ];
  attached(){

    //console.log(dataTable);
    var dataSet = this.dataSet;
    //console.log(dataSet);
    //require( 'datatables.net' )( window, $ );
    $(() =>     $('#example').DataTable({ 
        select: true,
        data: dataSet,
        columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" }

        ]
    }) );
  }
 }

查看

<template>
  <div class="container" style="margin-top:20px">
    <div>test datatables</div>
    <table id="example" class="display" width="100%"></table>
  </div>

</template>

Answer 1

当你使用jspm时，你不需要在package.json中更改任何内容。您应该使用jspm安装javascript库，如下所示：

jspm install npm:datatables.net

然后，您必须使用以下方法导入它：

import $ from 'jquery';
import 'datatables.net';
export class MyTable{
  dataSet = [
      ['Ken','Husband','Home'],
      ['Barbie','Wife','Home']
    ];
  attached(){

    //console.log(dataTable);
    var dataSet = this.dataSet;
    $('#example').DataTable({ 
        select: true,
        data: dataSet,
        columns: [
        { title: "Name" },
        { title: "Position" },
        { title: "Office" }

        ]
    });
  }
}

希望这有帮助！

Answer 2

看起来它已经在jspm中设置：https://github.com/jspm/registry/blob/master/package-overrides/github/DataTables/DataTables@1.10.4.json

只需通过别名安装即可：

jspm install datatables

响应也覆盖：https://github.com/jspm/registry/blob/master/package-overrides/github/DataTables/Responsive@1.0.4.json

但我认为你必须安装它：

jspm install github:DataTables/Responsive@1.0.4

Answer 3

解决了这个问题。这就是我如何将库添加到我的项目中，我是如何导入它们的，以及JSPM加载库的方式的一个小问题（至少我认为有更多Javascript经验的人可以纠正我）。

解决方案就在这个链接上。

https://github.com/aurelia/skeleton-navigation/issues/473

一个工作示例：

将以下库添加到项目中

jspm install datatables.net=npm:datatables.net
jspm install datatables.net-responsive=npm:datatables.net-responsive
jspm install datatables.net-responsive-bs=npm:datatables.net-responsive-bs
jspm install datatables.net-bs=npm:datatables.net-bs

的index.html：

<html>
  <head>
    <title>Aurelia</title>
    <link rel="stylesheet" href="jspm_packages/npm/font-awesome@4.6.1/css/font-awesome.min.css">
    <link rel="stylesheet" href="styles/styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body aurelia-app="main">
    <div class="splash">
      <div class="message">Aurelia Navigation Skeleton</div>
      <i class="fa fa-spinner fa-spin"></i>
    </div>

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      // ensure jQuery is loaded and set before other imports in you project
      System.import('jquery')
        .then(jquery => {
          window.jQuery = jquery;
          window.$ = jquery;

          // now load and bootstrap aurelia
          return System.import('aurelia-bootstrapper');
        });
    </script>
  </body>
</html>

welcome.html：

<template>
  <section class="au-animate">
    <div class="container" style="margin-top:20px">
      <div>test datatables</div>
      <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%"></table>
    </div>
    </section>
</template>

welcome.js

import * as datatable from 'datatables';
//following only once in you app i think
import * as responsive from 'datatables.net-responsive';
import * as responsiveBs from 'datatables.net-responsive-bs';
import * as netBs from 'datatables.net-bs';

//This could be done an alternative way apparently (see below) but this is what worked for me. I have to give credit to the poster doktordirk on the github aurelia issue.
responsive.default(window, $)
responsiveBs.default(window, $)    
netBs.default(window, $)

//alternative method
//let responsive = responsive.default(); // to change settings?
//responsiveBs.default();
//netBs.default();

export class Welcome {
  dataSet = [
      ['Ken','Husband','Home'],
      ['Barbie','Wife','Home']
    ];

  attached() {
   // can call: responsive(settings, options);
    $('#example').DataTable({
       select: true,
       data: this.dataSet,
       columns: [
         { title: "Name" },
         { title: "Position" },
         { title: "Office" }
        ]
   });
  }
}

外部库引用在Webpack中工作，但在Aurelia中的JSPM中不工作

3 个答案: