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

（另外，如有/无可绑定的评论中所述=＆＃34;路由器＆＃34;＆gt;这里没有任何区别）

<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和{{1} }。

另请注意，我将所有软件包更新为最新版本（包括Babel，Aurelia-CLI和其他版本）。

Answer 1

从头开始重新开始，然后以Aurelia-App-Contact为基础回购。我终于找到了问题，在我的案例中，这个问题与2个问题有关。首先我错过了一个.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>

Aurelia可绑定路由器无法使用CLI

1 个答案: