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版本中修复。保持所有依赖关系为最新状态，您的应用应该可以重新使用。

Aurelia导航栏不再显示

1 个答案: