如何在加载视图时运行SystemJs模块

我有一个组件加载了一个基于Bootstrap.js和Jquery构建的基于H1，H2 ...标题的页面内容表的JavaScript模块。该组件的代码如下：如何在加载视图时运行SystemJs模块

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从我的应用程序束加载自举toc.js模块，无论我把这个在我的观点：

<scriptinjector url="lib/bootstrap-toc.js" is-local.bind='true'></scriptinjector>

我的问题是，虽然这工作完美，当我第一次加载视图，后续访问不生成目录（目录）。我已经检查过，Aurelia事实上在每次加载视图时调用System.Import，但似乎一旦一个模块被导入一次，它就再也不会被再次导入（bundle中的代码再也不会运行了）。

有没有人知道我可以在重新进入视图时卸载/重新加载/重置/重新运行模块？

来源

2017-06-23 Bitfiddler

好吧，经过几天的斗争之后，我已经找到了一个可以接受的解决方案，它保留了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/[email protected]/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/[email protected]/js/browser/bluebird.min.js"></script> 
    <script src="jspm_packages/npm/[email protected]/dist/jquery.min.js"></script> 
    <script src="jspm_packages/github/twbs/[email protected]/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文件夹中，并且你有configured your bundling来包含你的源文件夹中的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为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将被定义。您可以使用此解决方案解决这些构建错误here。

来源

2017-06-24 01:32:03 Bitfiddler

如何在加载视图时运行SystemJs模块

回答

相关问题