nicht in der Lage, Zeilen von "router.navigation" zu erhalten

Question

Während ich Aurelia neu bin, mag ich Aurelia wirklich. Ich habe das "Getting started" mit Aurelia gelesen und habe etwas am configure-Router gelesen. Speziell verwende ich http://mobilemancer.com/2016/11/18/using-router-in-aurelia-spa/ als Grundlage für mein Verständnis.

Ich befolge die üblichen Konventionen (app.ts, app.html und navigation.html). Ich bin nicht in der Lage, die "repeat.for" über die Zeilen (speziell in diesem Fall eine Zeile) in router.navigation zu durchlaufen. Ich bin mir sicher, dass ich einen elementaren Fehler mache. Aber unfähig, was herauszufinden. Sowohl app.html als auch navigation.html scheinen "ausgeführt" zu werden, wenn sowohl "Aurelia Router Demo" als auch "nett" im Browser erscheinen.

Danke für Ihre Hilfe!

app.ts

import { autoinject } from 'aurelia-framework'; 
import { RouterConfiguration, Router } from 'aurelia-router'; 
@autoinject 
export class App { 

    public router: Router; 
    configureRouter(config: RouterConfiguration, router: Router): void { 
     this.router = router; 
     config.title = ' Test '; 
     config.map([ 
     {route: ['', 'home'], name: 'home', moduleId: './home', nav: true, title: 'Home'}, 
     ]); 
    } 
} 

app.html

<template> 
    <require from="./navigation.html"> </require> 
    <h1> Aurelia Router Demo </h1> 
    <navigation router.bind="router"> </navigation> 
    <div class="page-host"> 
    <router-view> 
    </router-view> 
    </div> 
</template> 

--navigation.html

<template bindable="router"> 
    <h2> nice </h2> 
    <nav> 
    <ul> 
     <li repeat.for="row of router.navigation"> 
      <a href.bind="row.href"> ${row.title} </a> 
     </li> 
    </ul> 
    </nav> 
</template> 

Answer 1

ich auf den ersten Blick etwas falsch nicht. Versuchen Sie es mit compose statt den Router zu binden, um zu sehen, ob das funktioniert. compose ohne ein spezifiziertes view-model Attribut verwendet das Ansichtsmodell des Verbrauchers, wodurch die Notwendigkeit entfällt, den Router durch Datenbindung zu übergeben. Wenn Sie ein benutzerdefiniertes Element mit einer .html Erweiterung benötigen, wird von Aurelia automatisch ein Ansichtsmodell dafür generiert.

Grundsätzlich verwenden compose statt navigation:

app.html

<template> 
    <h1> Aurelia Router Demo </h1> 
    <compose view="./navigation.html"> </compose> 
    <div class="page-host"> 
    <router-view> 
    </router-view> 
    </div> 
</template> 

Und entfernen bindable="router" aus:

navigation.html

<template> 
    <h2> nice </h2> 
    <nav> 
    <ul> 
     <li repeat.for="row of router.navigation"> 
      <a href.bind="row.href"> ${row.title} </a> 
     </li> 
    </ul> 
    </nav> 
</template> 

Answer 2

In meiner Konfiguration, einschließlich aurelia-routing.min.js als Skript-Tag funktioniert nicht. (Mögliche doppelte Ausgabe bei How to install/setup Aurelia router/routes).

Wenn ich einen Build (au build) mache und die vendor.js einschließe, dann funktioniert die Sache (repeat.for).

Vielen Dank für schnelle Antworten!