unable to get rows of "router.navigation"

Question

While I am new to Aurelia, I am really liking Aurelia. I have read the "Getting started" with Aurelia and have done some reading on configure router. Specifically I am using http://mobilemancer.com/2016/11/18/using-router-in-aurelia-spa/ as a basis for my understanding.

I am following the normal conventions (app.ts, app.html and navigation.html). I am unable to get the "repeat.for" to iterate over the rows (specifically in this case one row) in router.navigation. I am sure that I am making some elementary mistake. But unable to find out what. Both of app.html and navigation.html seem to be "executing" in terms of seeing both "Aurelia Router Demo" and "nice" appearing on the browser.

Thanks for your help!

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>

Works for me! If you drop the ul/li inside your app.html file, does it work? Is this the exact code (especially variable name and file name case)? — thinkOfaNumber
Are you, by chance, also injecting Router in to the class? Just a guess. Other than that, I'd recommend changing the name of the navigation custom element to have a dash in it. Aurelia allows single word custom elements, but the standard doesn't, and I once got bit by this by using nav.html instead of nav-bar.html. Given that there is already a nav element (and it's used inside of the nav.html I created)... I kinda sorta crashed the browser :-) — Ashley Grant

Jeff G Jeff G · Accepted Answer · 2017-02-08T13:33:11

I don't see anything wrong at first glance. Try using compose instead of binding the router to see if that works. compose without a specified view-model attribute uses the consumer's view-model, removing the necessity of passing the router through data binding. Note that when requiring a custom element with a .html extension, Aurelia automatically generates a view model for it.

Basically, use compose instead of navigation:

app.html

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

And remove bindable="router" from:

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>

unable to get rows of "router.navigation"

2 Answers