如何在加載視圖時運行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模塊

回答

相關問題