不使用CLI的Aurelia可绑定路由器

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=“路由器”>的注释中所指出的，这里没有任何不同之处)

<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和其他版本)。

Answer 1

重新开始后，从零开始，一片片，仍然以Aurelia-App-Contact为基础回购。我终于发现了这个问题，在我的例子中，这个问题与两个问题有关。首先我丢失了一个.babelrc配置文件，第二个原因是我丢失了那个文件，我在Babel网站上发现我需要2个插件来使用装饰器(比如@inject)，然后我手动将它们插入到Babel配置中，但是这些插件并不是直接兼容的。

缺少的.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>