Setting a “related” route as active in Aurelia

Question

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.com/alsoicode/37c5699f29c7562d2bf5

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.