我正在尝试让此示例在我的 Aurelia 应用程序中运行。
https://datatables.net/extensions/responsive/examples/styling/bootstrap.html
我主要对蓝色+球体感兴趣。
在我的 aurelia 应用程序中，我添加了
"datatables-responsive": "npm:datatables-responsive@^1.0.7",
到我的package.json。
我还补充道:
<link rel="stylesheet" href="styles/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="styles/responsive.bootstrap.min.css">
到我的index.html。
我将 import datatables-responsive; 添加到我的虚拟机，但收到错误消息，提示它无法找到不同的资源。
Error: XHR error (404 Not Found) loading http://localhost:9000/dist/datatables.net.js
Error loading http://localhost:9000/dist/datatables.net.js as "datatables.net" from http://localhost:9000/jspm_packages/npm/datatables-responsive@1.0.7/js/dataTables.responsive.js
Stack trace:
o@http://localhost:9000/jspm_packages/system.js:4:12694
e/</I/s.onreadystatechange@http://localhost:9000/jspm_packages/system.js:4:13219
我不明白为什么它应该已经导入了数据表而正在寻找 datatables.net.js 。对于解决这个问题有什么建议吗？
配置.js
System.config({
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"aurelia-animator-css": "npm:aurelia-animator-css@1.0.0-beta.1.2.0",
"aurelia-bootstrapper": "npm:aurelia-bootstrapper@1.0.0-beta.1.2.0",
"aurelia-fetch-client": "npm:aurelia-fetch-client@1.0.0-beta.1.2.1",
"aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.2.2",
"aurelia-history-browser": "npm:aurelia-history-browser@1.0.0-beta.1.2.0",
"aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.2.1",
"aurelia-logging-console": "npm:aurelia-logging-console@1.0.0-beta.1.2.0",
"aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1.2.0",
"aurelia-polyfills": "npm:aurelia-polyfills@1.0.0-beta.1.1.2",
"aurelia-router": "npm:aurelia-router@1.0.0-beta.1.2.1",
"aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1.2.1",
"aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.2.2",
"aurelia-templating-router": "npm:aurelia-templating-router@1.0.0-beta.1.2.0",
"babel": "npm:babel-core@5.8.38",
"babel-runtime": "npm:babel-runtime@5.8.38",
"bootstrap": "github:twbs/bootstrap@3.3.6",
"core-js": "npm:core-js@1.2.6",
"datatables": "npm:datatables@1.10.11",
"datatables-responsive": "npm:datatables-responsive@1.0.7",
"fetch": "github:github/fetch@0.11.0",
"font-awesome": "npm:font-awesome@4.6.1",
"text": "github:systemjs/plugin-text@0.0.3",
"github:jspm/nodelibs-assert@0.1.0": {
"assert": "npm:assert@1.3.0"
},
"github:jspm/nodelibs-path@0.1.0": {
"path-browserify": "npm:path-browserify@0.0.0"
},
"github:jspm/nodelibs-process@0.1.2": {
"process": "npm:process@0.11.2"
},
"github:jspm/nodelibs-util@0.1.0": {
"util": "npm:util@0.10.3"
},
"github:twbs/bootstrap@3.3.6": {
"jquery": "npm:jquery@2.2.3"
},
"npm:assert@1.3.0": {
"util": "npm:util@0.10.3"
},
"npm:aurelia-animator-css@1.0.0-beta.1.2.0": {
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.2"
},
"npm:aurelia-binding@1.0.0-beta.1.3.2": {
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.2.0"
},
"npm:aurelia-bootstrapper@1.0.0-beta.1.2.0": {
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1.2.0",
"aurelia-framework": "npm:aurelia-framework@1.0.0-beta.1.2.2",
"aurelia-history": "npm:aurelia-history@1.0.0-beta.1.2.0",
"aurelia-history-browser": "npm:aurelia-history-browser@1.0.0-beta.1.2.0",
"aurelia-loader-default": "npm:aurelia-loader-default@1.0.0-beta.1.2.1",
"aurelia-logging-console": "npm:aurelia-logging-console@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
"aurelia-pal-browser": "npm:aurelia-pal-browser@1.0.0-beta.1.2.0",
"aurelia-polyfills": "npm:aurelia-polyfills@1.0.0-beta.1.1.2",
"aurelia-router": "npm:aurelia-router@1.0.0-beta.1.2.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.2",
"aurelia-templating-binding": "npm:aurelia-templating-binding@1.0.0-beta.1.2.1",
"aurelia-templating-resources": "npm:aurelia-templating-resources@1.0.0-beta.1.2.2",
"aurelia-templating-router": "npm:aurelia-templating-router@1.0.0-beta.1.2.0"
},
"npm:aurelia-dependency-injection@1.0.0-beta.1.2.0": {
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
},
"npm:aurelia-event-aggregator@1.0.0-beta.1.2.0": {
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0"
},
"npm:aurelia-framework@1.0.0-beta.1.2.2": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.2",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.0",
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.2.0",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.2.0",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.2"
},
"npm:aurelia-history-browser@1.0.0-beta.1.2.0": {
"aurelia-history": "npm:aurelia-history@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
},
"npm:aurelia-loader-default@1.0.0-beta.1.2.1": {
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.2.0",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
},
"npm:aurelia-loader@1.0.0-beta.1.2.0": {
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1"
},
"npm:aurelia-logging-console@1.0.0-beta.1.2.0": {
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
},
"npm:aurelia-metadata@1.0.0-beta.1.2.0": {
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
},
"npm:aurelia-pal-browser@1.0.0-beta.1.2.0": {
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
},
"npm:aurelia-polyfills@1.0.0-beta.1.1.2": {
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
},
"npm:aurelia-route-recognizer@1.0.0-beta.1.2.0": {
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1"
},
"npm:aurelia-router@1.0.0-beta.1.2.1": {
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.0",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@1.0.0-beta.1.2.0",
"aurelia-history": "npm:aurelia-history@1.0.0-beta.1.2.0",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
"aurelia-route-recognizer": "npm:aurelia-route-recognizer@1.0.0-beta.1.2.0"
},
"npm:aurelia-task-queue@1.0.0-beta.1.2.0": {
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0"
},
"npm:aurelia-templating-binding@1.0.0-beta.1.2.1": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.2",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.2"
},
"npm:aurelia-templating-resources@1.0.0-beta.1.2.2": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.2",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.0",
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.2.0",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.2.0",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.2"
},
"npm:aurelia-templating-router@1.0.0-beta.1.2.0": {
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.0",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
"aurelia-router": "npm:aurelia-router@1.0.0-beta.1.2.1",
"aurelia-templating": "npm:aurelia-templating@1.0.0-beta.1.2.2"
},
"npm:aurelia-templating@1.0.0-beta.1.2.2": {
"aurelia-binding": "npm:aurelia-binding@1.0.0-beta.1.3.2",
"aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.0.0-beta.1.2.0",
"aurelia-loader": "npm:aurelia-loader@1.0.0-beta.1.2.0",
"aurelia-logging": "npm:aurelia-logging@1.0.0-beta.1.2.0",
"aurelia-metadata": "npm:aurelia-metadata@1.0.0-beta.1.2.0",
"aurelia-pal": "npm:aurelia-pal@1.0.0-beta.1.2.0",
"aurelia-path": "npm:aurelia-path@1.0.0-beta.1.2.1",
"aurelia-task-queue": "npm:aurelia-task-queue@1.0.0-beta.1.2.0"
},
"npm:babel-runtime@5.8.38": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:core-js@1.2.6": {
"fs": "github:jspm/nodelibs-fs@0.1.2",
"path": "github:jspm/nodelibs-path@0.1.0",
"process": "github:jspm/nodelibs-process@0.1.2",
"systemjs-json": "github:systemjs/plugin-json@0.1.1"
},
"npm:datatables-responsive@1.0.7": {
"datatables": "npm:datatables@1.10.11",
"jquery": "npm:jquery@2.2.3",
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:datatables@1.10.11": {
"css": "github:systemjs/plugin-css@0.1.21",
"jquery": "npm:jquery@2.2.3"
},
"npm:font-awesome@4.6.1": {
"css": "github:systemjs/plugin-css@0.1.21"
},
"npm:inherits@2.0.1": {
"util": "github:jspm/nodelibs-util@0.1.0"
},
"npm:path-browserify@0.0.0": {
"process": "github:jspm/nodelibs-process@0.1.2"
},
"npm:process@0.11.2": {
"assert": "github:jspm/nodelibs-assert@0.1.0"
},
"npm:util@0.10.3": {
"inherits": "npm:inherits@2.0.1",
"process": "github:jspm/nodelibs-process@0.1.2"
}
}
});
最佳答案
问题已解决。这一切都在于我如何将库添加到我的项目中，如何导入它们，以及 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
索引.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>
欢迎.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>
欢迎.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';
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" }
]
});
}
}
关于javascript - 无法正确将外部 JS 导入 Aurelia 应用程序(数据表)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37607107/