Aurelia可绑定路由器不能与CLI配合使用

问题描述：

我似乎在使用@bindable和<nav-bar router.bind="router"></nav-bar>时遇到问题。我花了很多时间试图找出可能丢失的东西，但从我可以告诉的情况来看，我看起来都很完整，但是没有一条路线出现。它完全是空的，也正在查看DOM，我可以看到没有任何东西被填充。这用于在WebPack工作，所以我不知道为什么这不会在CLI工作。Aurelia可绑定路由器不能与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和其他版本）。

你不需要模板标签上的bindable =“路由器”，因为你已经在你的视图模型中定义了它。不知道这是不是原因。 – mgiesa

是的，我尝试删除它，但它没有效果:( – ghiscoding

答

重新开始从头开始，一块一块，仍然是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>

Aurelia可绑定路由器不能与CLI配合使用

相关推荐