CODEWITHSUNDEEP
aurelia
milind parikh
milind parikh

Reputation: 81

unable to get rows of "router.navigation"

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>

Upvotes: 1

Views: 260

Answers (2)

milind parikh
milind parikh

Reputation: 81

In my configuration , including aurelia-routing.min.js as a script tag does NOT do the work. (Possible duplicate issue at How to install/setup Aurelia router/routes).

If I do a build ( au build) and include the vendor.js, then the thing (repeat.for) works.

Thanks for quick responses!

Upvotes: 0

Jeff G
Jeff G

Reputation: 2175

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>

Upvotes: 1

Related Questions