I have two routes in my Aurelia app, a list (Work) and a detail (WorkDetail).

In the navigation, I only have the list route:

Home  |  *Work*  |  Contact  |  . . .

When I navigate to the WorkDetail view, I would like to set the Work route as active in the navigation.

What I've tried so far is setting the route active in the activate() callback of the WorkDetail view and inactive on deactivate():

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class WorkDetail {
    constructor(router) {
        this.workRoute = router.routes[2].navModel;
    };

    activate(params, routeConfig, navigationInstruction) {
        this.workRoute.isActive = true;
    };

    deactivate() {
        this.workRoute.isActive = false;
    };
}

The problem I'm experiencing is that on the first activation, the "Work" nav item isn't displayed as "active". If I nav to another WorkItem, it will be set as "active".

Why is that nav item only set as active on a subsequent nav action? or, is there a better way to set a parent/related navigation item as "active"?

Here's my app.js if you're interested:

I have two routes in my Aurelia app, a list (Work) and a detail (WorkDetail).

In the navigation, I only have the list route:

Home  |  *Work*  |  Contact  |  . . .

When I navigate to the WorkDetail view, I would like to set the Work route as active in the navigation.

What I've tried so far is setting the route active in the activate() callback of the WorkDetail view and inactive on deactivate():

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class WorkDetail {
    constructor(router) {
        this.workRoute = router.routes[2].navModel;
    };

    activate(params, routeConfig, navigationInstruction) {
        this.workRoute.isActive = true;
    };

    deactivate() {
        this.workRoute.isActive = false;
    };
}

The problem I'm experiencing is that on the first activation, the "Work" nav item isn't displayed as "active". If I nav to another WorkItem, it will be set as "active".

Why is that nav item only set as active on a subsequent nav action? or, is there a better way to set a parent/related navigation item as "active"?

Here's my app.js if you're interested: https://gist.github./alsoicode/37c5699f29c7562d2bf5

• javascript
• aurelia

• sounds related to your multiple activate issue. – Matthew James Davis Commented Sep 28, 2015 at 15:00
• @MatthewJamesDavis I created my project via the Yeoman generator. Should I try starting a new bare-bones project? I'm not sure how to go about debugging this. Ideas? Thoughts? Suggestions? – Brandon Taylor Commented Sep 28, 2015 at 15:03
• Are these two separate routes or are you using a child router / nested resources? – PW Kad Commented Sep 28, 2015 at 15:30
• @PWKad They are two separate routes in the app.js file. – Brandon Taylor Commented Sep 28, 2015 at 15:34
• @PWKad I added a link to my app.js so you can see the route definitions. – Brandon Taylor Commented Sep 28, 2015 at 16:19

1 Answer 1

If I understand the question correctly, you have a "Work" link in your nav-bar, which launches the list of "work". Then when you click on an item in your work list you want the "Work" link in the nav-bar to remain active when the work "detail" screen is activated.

Here's the approach that I used in this application:

In app.js, configure the "work" route:

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { route: '', redirect: 'work' },
      { route: 'work', moduleId: './work/work-section', nav: true, title: 'Work' },
      // ... routes for other top-level sections ...
    ]);
    this.router = router;
  }
}

Then add a "work" folder to your project. This folder will contain the "work" related views and view-models.

In the work folder, add "work-section.js":

/**
* The shell for the work section of the application.  Will display either
* the work-list or work-detail page.
*/
export class WorkSection {
  configureRouter(config, router) {
    config.map([
      { route: '',    moduleId: './work-list',   nav: false, title: '' },
      { route: ':id', moduleId: './work-detail', nav: false, title: '' },
    ]);
  }
}

Next add "work-section.html". It's just a <router-view>:

<template>
  <router-view></router-view>
</template>

Finally, add your work-list.js + .html and work-detail.js + .html to the "work" folder. When clicking on the "work" link in the nav-bar, the work-list will be displayed by default. When you drill into an item in the work-list, the "work" link in the nav-bar will remain active.

Check out the sample application. It has three top-level sections (orders, customers and employees). Each section uses this approach. The code is here.