我有一个组件，该组件加载一个JavaScript模块，该模块在Bootstrap.js和jQuery上构建，可以自动构建基于H1，H2，...标头的页面的目录。组件代码如下：
import { bindable, bindingMode, customElement, noView } from 'aurelia-framework';
@noView()
@customElement('scriptinjector')
export class ScriptInjector {
@bindable public url;
@bindable public isLocal;
@bindable public isAsync;
@bindable({ defaultBindingMode: bindingMode.oneWay }) protected scripttag;
private tagId = 'bootTOCscript';
public attached() {
if (this.url) {
this.scripttag = document.createElement('script');
if (this.isAsync) {
this.scripttag.async = true;
}
if (this.isLocal) {
System.import(this.url);
return;
} else {
this.scripttag.setAttribute('src', this.url);
}
document.body.appendChild(this.scripttag);
}
}
public detached() {
if (this.scripttag) {
this.scripttag.remove();
}
}
}
本质上，对于那些不熟悉Aurelia的人，这只会使用Systemjs加载Bootstrap-toc.js模块，无论我将其放在我的视图上：
<scriptinjector url="lib/bootstrap-toc.js" is-local.bind='true'></scriptinjector>
我的问题是，尽管当我第一次加载视图时，这很好地工作，但随后的访问不会生成TOC(目录(。我已经检查了Aurelia实际上是在调用系统。每次加载视图时Import，但是似乎一旦导入一个模块一次，它就不会再导入了(捆绑包中的代码再也不会运行第二次(。/p>
有人在重新输入视图时如何卸载/重新加载/重置/重新运行模块？
好吧，所以经过几天的战斗，我已经找到了一种可接受的解决方案，该解决方案可以保留TOC库的所有功能，并且需要对骨架项目和目标库的更改，我可以管理。忘记上面的脚本注射器。
在index.html中，执行如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Holdings Manager</title>
<!--The FontAwesome version is locked at 4.6.3 in the package.json file to keep this from breaking.-->
<link rel="stylesheet" href="jspm_packages/npm/font-awesome@4.6.3/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" data-spy="scroll" data-target="#toc">
<div class="splash">
<div class="message">Holdings Manager</div>
<i class="fa fa-spinner fa-spin"></i>
</div>
<!-- The bluebird version is locked at 4.6.3 in the package.json file to keep this from breaking -->
<!-- We include bluebird to bypass Edge's very slow Native Promise implementation. The Edge team -->
<!-- has fixed the issues with their implementation with these fixes being distributed with the -->
<!-- Windows 10 Anniversary Update on 2 August 2016. Once that update has pushed out, you may -->
<!-- consider removing bluebird from your project and simply using native promises if you do -->
<!-- not need to support Internet Explorer. -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script src="jspm_packages/npm/bluebird@3.4.1/js/browser/bluebird.min.js"></script>
<script src="jspm_packages/npm/jquery@2.2.4/dist/jquery.min.js"></script>
<script src="jspm_packages/github/twbs/bootstrap@3.3.7/js/bootstrap.min.js"></script>
<script>
System.import('core-js').then(function() {
return System.import('polymer/mutationobservers');
}).then(function() {
System.import('aurelia-bootstrapper');
}).then(function() {
System.import('lib/bootstrap-toc.js');
});
</script>
</body>
</html>
这是假设您已经使用JSPM安装了引导程序(这将jQuery作为依赖关系(。这也假定您已将JavaScript库(我想合并的一个，在我的情况下是Bootstrap-toc(放在SRC/LIB文件夹中，并且您已经配置了捆绑库以从源文件夹中包含JS文件。
。接下来，如果您的库有一个自我执行的匿名函数，则需要采用该代码并将其移动到您希望应用库的ViewModel的"附加"方法中。因此，在这种情况下，我有一个"帮助"视图，其中包含我想要为TOC生成的各个部分/小节，因此代码看起来像：
import { singleton } from 'aurelia-framework';
@singleton()
export class Help {
public attached() {
$('nav[data-toggle="toc"]').each((i, el) => {
const $nav = $(el);
window.Toc.init($nav);
});
}
}
上面的"附件"方法中的代码是从bootstrap-toc.js文件中剪切并粘贴的，我删除了自我执行的匿名方法。
我尝试使用system.import for jQuery/bootstrap库，但这使TOC功能的一部分停止了工作，我已经失去了耐心，以弄清楚为什么这些库以脚本参考为止。
>另外，当您构建项目时，您将获得错误：
help.ts(7,7): error TS2304: Cannot find name '$'.
help.ts(9,16): error TS2339: Property 'Toc' does not exist on type 'Window'.
这些在运行时不会引起问题，因为在实例化之前将定义$和TOC。您可以在此处使用此解决方案解决这些构建错误。