我正试图让这个例子在我的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。有关解决此问题的任何建议吗？
Config.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"
}
}
});
答案 0 :(得分：0)
如何在export.Js文件中添加它？
答案 1 :(得分：0)
解决了这个问题。这就是我如何将库添加到我的项目中，我是如何导入它们的，以及JSPM加载库的方式的一个小问题（至少我认为有更多Javascript经验的人可以纠正我）。
解决方案就在这个链接上。
https://github.com/aurelia/skeleton-navigation/issues/473
一个工作示例：
将以下库添加到项目中
NotificationCenter.notify(SnapProtocol.self) {
$0.colorPicked(x)
}
的index.html：
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
welcome.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.js
<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>