Appending a value to the Aurelia router config.title

5
votes

I want to set a base title value for my Aurelia application and then append a value to it based on the route that is active.

My router configuration is:

export class App {
    configureRouter(config, router) {
        config.title = 'Brandon Taylor | Web Developer | Graphic Designer';
        config.map([
            . . .
            { route: 'work', name: 'work', moduleId: 'work', nav: true, title: ' | work' },
            . . .
        ]);

        this.router = router;
    }
}

Aurelia wants to append the title navigation parameter to the beginning of the config.title, but I would like it at the end.

I've tried doing an override in the view model:

export class Work {
    activate(params, routeConfig, navigationInstruction) {
        routeConfig.navModel.router.title += ' | work';
    };
}

but this results in:

Brandon Taylor | Web Developer | Graphic Designer | work | work | work ...

on each routing request. What am I doing wrong? or how can I append the route title attribute to the end of the config.title instead of the beginning?

3
javascriptaurelia
The better question is why is activate being called three times. – Ashley Grant
@AshleyGrant is there another callback I should be using? I'm just getting started with Aurelia. Thanks. – Brandon
No, you're looking in the right place. However, there is a bigger issue if a route is being activated multiple times. To start, drop a breakpoint in your activate callback and see whats happening and why. – Matthew James Davis
@MatthewJamesDavis what am I looking for in regards to why activate() would be called multiple times? If I console.log('activate called'); inside the method itself, and navigate to the route, nav away and nav back, I see multiple log statements. – Brandon
hard to say without some code to look at. did you ask someone in the gitter channel? gitter.im/Aurelia/Discuss – Matthew James Davis

3 Answers

5
votes

Aurelia's standard title logic prepends the route title to the outer route/router's title. For example, in the skeleton-navigation app, the application router's title is Aurelia. The github users route's title is prepended to the router title producing Github Users | Aurelia. If you were to navigate to the child router page, the title updates to Welcome | Child Router | Aurelia. title

If I understand the question correctly, you would like this logic reversed. The desired result in this example would be Aurelia | Child Router | Welcome.

The title building logic resides in NavigationContext class's buildTitle method.

You can override this method by adding the following to your main.js:

// import the NavigationContext class.  It contains the method that
// builds the title.
import {NavigationContext} from 'aurelia-router';

// rename the standard "buildTitle" method.
NavigationContext.prototype.standardBuildTitle = NavigationContext.prototype.buildTitle;

// replace the standard "buildTitle" method with a version that
// reverses the order of the title parts.
function buildTitle(separator = ' | ') {
  let standardTitle = this.standardBuildTitle(separator);
  return standardTitle.split(separator).reverse().join(separator);
}
NavigationContext.prototype.buildTitle = buildTitle;

The end result looks like this: result

0
votes

I know that the code above is a ~dirty~ workaround, but maybe can help you until you get a beautiful way to get what you want from Aurelia support.

Couldn't you do:

export class App {
    configureRouter(config, router) {
        const title = 'Brandon Taylor | Web Developer | Graphic Designer';
        config.title = '';
        var configMap = [
            . . .
            { route: 'work', name: 'work', moduleId: 'work', nav: true, title: ' | work' },
            . . .
        ];
        configMap.forEach(item => item.title = title + item.title);

        config.map(configMap);    
        this.router = router;
    }
}
0
votes

Thanks for pointing me in the right direction @Jeremy Danyow.

What I ended up with was:

import {NavigationContext} from 'aurelia-router';

NavigationContext.prototype.standardBuildTitle = NavigationContext.prototype.buildTitle;

function buildTitle(separator=' | ') {
    var titleValues = this.standardBuildTitle(separator).split(separator),
        routeTitle = titleValues[0],
        configTitle = titleValues.slice(1);
    configTitle.push(routeTitle);
    return configTitle.join(separator);
}

NavigationContext.prototype.buildTitle = buildTitle;

The reason being that given:

config.title = 'Brandon Taylor | Web Developer | Graphic Designer'

and calling:

return standardTitle.split(separator).reverse().join(separator);

results in:

Graphic Designer | Web Developer | Brandon Taylor | about

instead of:

Brandon Taylor | Web Developer | Graphic Designer | about