Skip to content

Instantly share code, notes, and snippets.

@claudiobernasconi
Created March 12, 2017 19:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save claudiobernasconi/26754dcec3bd33ee357e1222d18e13ac to your computer and use it in GitHub Desktop.
Save claudiobernasconi/26754dcec3bd33ee357e1222d18e13ac to your computer and use it in GitHub Desktop.
This gist demonstrates how the router.navigation property in the navigation.ts view does not work as expected when the router property type on the app.ts viewModel is set to any.
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./header"></require>
<require from="./navigation"></require>
<div style="margin-top: 60px;">
<navigation></navigation>
<div id="master" style="margin-left:250px;padding-left:10px;border-left: 1px solid #000000;">
<div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message.</div>
<header></header>
<router-view></router-view>
</div>
<div class="clear" style="clear:both;"></div>
</div>
</template>
import {Router} from 'aurelia-router';
export class App {
router: Router; /* change the type of this variable to any and it won't work in navigation.ts */
configureRouter(config, router){
config.title = "Aurelia";
config.options.root = '/';
config.map([
{ route: ["", "login"], name: "login", moduleId: "login", nav: false},
{ route: "batch/overview", name: "overview", moduleId: "overview", title: "Übersicht", nav: true},
{ route: "batch/completed-jobs", name: "completed-jobs", moduleId: "completed-jobs", title: "Abgeschlossene Jobs", nav: true},
{ route: "batch/job-definitions", name: "job-definitions", moduleId: "job-definitions", title: "Job Definitionen", nav: true},
]);
this.router = router;
}
}
<template>
<div id="navigation" style="width:250px;float:left;padding-left:10px;padding-right:5px;">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"><a href="${row.href}">${row.title}</a></li>
</ul>
</div>
</template>
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
@inject(Router)
export class Navigation {
constructor(private router: Router){
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment