Fatal编程技术网
  • aurelia/
  • Aurelia 如何在加载视图时运行SystemJs模块

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

aurelia

Aurelia 如何在加载视图时运行SystemJs模块,aurelia,systemjs,Aurelia,Systemjs,我有一个组件，它加载一个javascript模块，该模块构建在Bootstrap.js和Jquery上，以自动为基于H1、H2，。。。标题。部件代码如下所示： import { bindable, bindingMode, customElement, noView } from 'aurelia-framework'; @noView() @customElement('scriptinjector') export class ScriptInjector { @bindable p

我有一个组件，它加载一个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();
    }
  }
}

<!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>
基本上，对于那些不熟悉Aurelia的人来说，这只是使用SystemJs从我的应用程序包中加载bootstrap-toc.js模块，无论我在视图中放在哪里：

<scriptinjector url="lib/bootstrap-toc.js" is-local.bind='true'></scriptinjector>
我的问题是，虽然这在我第一次加载视图时工作得很好，但后续的访问不会生成TOC（目录）。我已经检查过Aurelia实际上是在调用System.Import，每次加载视图时都要导入，但似乎一个模块导入一次后，就再也不会导入了（包中的代码再也不会运行了）

有人知道我如何在重新进入视图时卸载/重新加载/重置/重新运行模块吗？

好的，经过几天的努力，我找到了一个可以接受的解决方案，它保留了TOC库的所有功能，并且需要尽可能少地更改框架项目和目标库。忘记上面的脚本吧

在index.html中，执行以下操作：

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();
    }
  }
}

<!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>
上面“attached”方法中的代码是从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和Toc都将在视图实例化之前定义。您可以使用此解决方案解决这些生成错误