Aurelia可綁定路由器不能與CLI配合使用

Question

我似乎在使用@bindable和<nav-bar router.bind="router"></nav-bar>時遇到問題。我花了很多時間試圖找出可能丟失的東西，但從我可以告訴的情況來看，我看起來都很完整，但是沒有一條路線出現。它完全是空的，也正在查看DOM，我可以看到沒有任何東西被填充。這用於在WebPack工作，所以我不知道爲什麼這不會在CLI工作。

也能給歷史的一點點，路線都顯示正常，如果我用<require from="./nav-bar.html"></require>（即與.html），但我想補充Aurelia-Auth到我的項目，所以我需要在添加一些代碼nav-bar.js文件。我有幾乎相同的代碼WebPack，似乎並沒有失敗，所以我不知道爲什麼CLI沒有顯示任何東西。

下面是我的代碼簡介。

app.html

<template> 
    <require from="./styles/bootstrap.css"></require> 
    <require from="./styles/styles.css"></require> 
    <require from="./nav-bar"></require> 

    <nav-bar router.bind="router"></nav-bar> 

    <div class="page-host"> 
    <loading-indicator loading.bind="router.isNavigating || api.isRequesting"></loading-indicator> 
    <router-view></router-view> 
    </div> 
</template> 

app.js

export class App { 
    configureRouter(config, router) { 
    config.title = 'Aurelia'; 
    config.map([ 
     { route: ['', 'welcome'], name: 'home',  moduleId: 'welcome',    nav: true, title: 'Welcome' }, 
     { route: 'contacts',  name: 'contacts', moduleId: 'modules/contacts/index', nav: true, title: 'Contacts' }, 
     { route: 'todo',   name: 'TODO',  moduleId: 'modules/todo/index',  nav: true, title: 'TODO' } 
    ]); 

    this.router = router; 
    } 
} 

NAV-一個bar.html

（也如在與所述評論中所指出/沒有bindable =「router」>沒有任何區別h ERE）

<template bindable="router"> 
    <nav class="navbar navbar-fixed-top navbar-light bg-faded"> 
    <a class="navbar-brand" href="#"> 
     <i class="fa fa-home"></i> 
     <span>${router.title}</span> 
    </a> 
     <ul class="nav navbar-nav"> 
     <li repeat.for="row of router.navigation" class="nav-item ${row.isActive ? 'active' : ''}"> 
      <a class="nav-link" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a> 
     </li> 
     </ul> 
    </nav> 
</template> 

NAV-bar.js

import {inject} from 'aurelia-framework'; 
import {customElement, bindable} from 'aurelia-framework'; 

@inject(Element) 
@customElement('nav-bar') 

export class NavBar { 
    @bindable router; 

    constructor() { 
    console.log('navbar constructor'); 
    console.log(this.router); 
    } 
} 

aurelia.json

"transpiler": { 
    "id": "babel", 
    "displayName": "Babel", 
    "fileExtension": ".js", 
    "options": { 
     "plugins": [ 
     "transform-class-properties", 
     "transform-decorators-legacy", 
     "transform-es2015-modules-amd" 
     ] 
    }, 
    "source": "src\\**\\*.js" 
    }, 
    ... 
    "dependencies": [ 
       "aurelia-binding", 
       "aurelia-bootstrapper", 
       "aurelia-dependency-injection", 
       "aurelia-event-aggregator", 
       "aurelia-fetch-client", 
       "aurelia-framework", 
       "aurelia-history", 
       "aurelia-history-browser", 
       "aurelia-http-client", 
       "aurelia-loader", 
       "aurelia-loader-default", 
       "aurelia-logging", 
       "aurelia-logging-console", 
       "aurelia-metadata", 
       "aurelia-pal", 
       "aurelia-pal-browser", 
       "aurelia-path", 
       "aurelia-polyfills", 
       "aurelia-route-recognizer", 
       "aurelia-router", 
       "aurelia-task-queue", 
       "aurelia-templating", 
       "aurelia-templating-binding" 
    ] 

如果有人想看到完整的圖片，和/或下載或測試代碼，我有一個Github公開回購，其中包含兩個包，即CLI和WebPack。

另請注意，我將所有軟件包更新到最新版本（包括Babel，Aurelia-CLI和其他版本）。

Answer 1

重新開始從頭開始，一塊一塊，仍然是Aurelia-App-Contact作爲基本回購。我終於找到了這個問題，在我的情況下，這與兩個問題有關。首先，我錯過了一個.babelrc配置文件，第二個因爲我錯過了那個文件，我在Babel網站上發現我需要2個插件來使用裝飾器（如@inject），我手動將它們插入到我的aurelia.json配置中，但是這些是不直接兼容。

失蹤.babelrc的內容是

{ 
    "sourceMap": true, 
    "moduleIds": false, 
    "comments": false, 
    "compact": false, 
    "code": true, 
    "presets": [ "es2015-loose", "stage-1"], 
    "plugins": [ 
    "syntax-flow", 
    "transform-decorators-legacy", 
    "transform-flow-strip-types" 
    ] 
} 

那麼我的主要問題是通過添加兩個Babel插件到aurelia.json配置文件引起的。那些與Aurelia不完全兼容，因此.babelrc就是因爲這個原因。

"plugins": [ 
    "transform-class-properties", // CAUSE OF THE ISSUE 
    "transform-decorators-legacy", // CAUSE OF THE ISSUE 
    "transform-es2015-modules-amd" 
] 

的Babel插件內aurelia.json結果應該是這個

"transpiler": { 
    "id": "babel", 
    "displayName": "Babel", 
    "fileExtension": ".js", 
    "options": { 
     "plugins": [ 
     "transform-es2015-modules-amd" 
     ] 
    }, 
    "source": "src/**/*.js" 
    }, 

也由@mgiesa指出的那樣，我應該從我的模板中刪除bindable="router"。這是取代<template bindable="router">到這個<template>