Aurelia Nav酒吧不再出现

Question

一年多前，我为一个电影节制作了这个aurelia网站，一切都很顺利。(www.suikerzoetfilmfestival.nl(

现在电影节又来了，我需要做出改变。但当我在我的机器上重新启动并运行该项目时，我根本无法显示导航。其中的div只是空的。

app.html

<template bindable="router,testHeader">
<require from="./bootstrap/css/bootstrap.css"></require>
<require from="font-awesome.css"></require>
<require from="./styles.css"></require>
<div class="wrapper">
<require from='./nav-bar'></require>
<nav-bar router.bind="router"></nav-bar>
<a route-href="route: home"><img src="./src/img/logo-groot.jpg" class="logogroot img-responsive" border="0"></a>
<div class="sz-sidebar img-responsive"></div>
<router-view></router-view>
</div>
</template>

还有我的app.js

import {Router, RouterConfiguration} from 'aurelia-router';
import {WebAPI} from './web-api';
export class App {
router: Router;
static inject = [WebAPI];
constructor(api) {
this.api = api;
}
configureRouter(config: RouterConfiguration, router: router) {
config.title = 'Suikerzoet';
config.options.pushState = true;
config.options.root = '/';
config.map([
// { route: ['', 'home'], moduleId: 'home', nav: true, title: 'home', settings: {isTop: true}  },
{ route: ['', '/*', 'home'], moduleId: 'home', nav: true, name:'home', title: 'home', settings: {isHeader: true}  },
{ route: 'locaties',  moduleId: 'locaties', nav: true, name:'locaties', title:'locaties', settings: {isHeader: true}  },
{ route: 'locaties/:id',  moduleId: 'locatie', name: 'locatie' },
{ route: 'films', moduleId: 'films', nav: true, title: 'films', name:'films', settings: {isHeader: true}  },
{ route: 'films/:id', moduleId: 'film', name: 'films'  },
{ route: 'programma', moduleId: 'programma', nav: true, title: 'programma', name:'programma', settings: {isHeader: true}  },
{ route: 'organisatie', moduleId: 'organisatie', nav: true, title:'organisatie', settings: {isTop: true}  },
{ route: 'vrienden', moduleId: 'vrienden', nav: true, title:'vriend van', settings: {isTop: true}  },
{ route: 'sponsors', moduleId: 'sponsors', nav: true, title: 'sponsors', settings: {isTop: true}  },
{ route: 'contact', moduleId: 'contact', nav: true, title: 'contact', settings: {isTop: true}  },
{ route: 'download', moduleId: 'download', nav: true, title: 'download', settings: {isTop: true}  },
{ route: 'nieuws/:id',  moduleId: 'nieuws', name:'nieuws' },
{ route: 'films/allefilms',  moduleId: 'allefilms', name:'allefilms', nav: false },   
]);
this.router = router;
}
}

在nav-bar.html中是

<div class="navbar-collapse collapse" id="collapsingNavbarXs">
<ul class="navbar-nav ml-auto">
<li class="nav-item" repeat.for = "row of router.navigation" class="${row.isActive ? 'active' : ''}">
<a if.bind="row.settings.isTop" class="nav-link" href.bind = "row.href"> ${row.title}</a>
</li>
</ul>
</div>

Answer 1

这是Aurelia最新版本中一个严重的已知错误。

https://github.com/aurelia/templating-resources/issues/355

更新：现在在aurelia模板v1.8.2版本中修复了它。保持你所有的依赖关系都是最新的，你的应用程序应该会重新开始工作。