Добавление значения к config.title маршрутизатора Aurelia

Я хочу установить базовое значение заголовка для своего приложения Aurelia, а затем добавить к нему значение на основе активного маршрута.

Моя конфигурация маршрутизатора:

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;
    }
}

Аурелия хочет добавить навигационный параметр title в начало config.title, но мне нужно, чтобы он был в конце.

Я попытался переопределить модель представления:

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

но это приводит к:

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

при каждом запросе маршрутизации. Что я делаю не так? или как я могу добавить атрибут маршрута title к концу config.title вместо начала?


javascript aurelia
person Brandon    schedule 26.09.2015    source источник
comment
Лучше спросить, почему активация вызывается три раза.   -  person Ashley Grant    schedule 27.09.2015
comment
@AshleyGrant, есть ли другой обратный вызов, который мне следует использовать? Я только начинаю работать с Аурелией. Спасибо.   -  person Brandon    schedule 27.09.2015
comment
Нет, вы ищете в правильном месте. Однако существует более серьезная проблема, если маршрут активируется несколько раз. Для начала поставьте точку останова в обратном вызове активации и посмотрите, что происходит и почему.   -  person Matthew James Davis    schedule 28.09.2015
comment
@MatthewJamesDavis, что я ищу в отношении того, почему activate() будет вызываться несколько раз? Если я console.log('activate called'); внутри самого метода и перехожу к маршруту, ухожу и возвращаюсь назад, я вижу несколько операторов журнала.   -  person Brandon    schedule 28.09.2015
comment
трудно сказать без кода, на который можно посмотреть. вы спросили кого-то в канале gitter? gitter.im/Aurelia/Обсудить   -  person Matthew James Davis    schedule 28.09.2015

Ответы (3)


arrow_upward
5
arrow_downward

Стандартная логика заголовков Aurelia добавляет заголовок маршрута к заголовку внешнего маршрута/маршрутизатора. Например, в приложении скелетной навигации заголовок приложения-маршрутизатора — Aurelia. Заголовок маршрута пользователей github добавляется к заголовку маршрутизатора, в результате чего получается Github Users | Aurelia. Если вы перейдете на страницу дочернего маршрутизатора, заголовок изменится на Welcome | Child Router | Aurelia. название

Если я правильно понимаю вопрос, вы бы хотели, чтобы эта логика была изменена. Желаемый результат в этом примере будет Aurelia | Child Router | Welcome.

Логика построения заголовка находится в методе buildTitle класса NavigationContext. .

Вы можете переопределить этот метод, добавив в 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;

Конечный результат выглядит так: result

person Jeremy Danyow    schedule 29.09.2015
comment
Очень близко! Порядок слов в заголовке конфигурации меняется на противоположный. Смотрите мой ответ. - person Brandon; 29.09.2015
comment
Теперь это находится в NavigationInstruction, и метод _buildTitle: github.com/aurelia/router/blob/master/src/ - person hcoverlambda; 17.02.2016
comment
Вы уверены, что _buildTitle предназначен для общего пользования? API не упоминает об этом. - person Jay Bienvenu; 16.03.2016

arrow_upward
0
arrow_downward

Я знаю, что приведенный выше код является ~грязным~ обходным путем, но, возможно, он может помочь вам, пока вы не получите красивый способ получить то, что вы хотите, от службы поддержки Aurelia.

Не могли бы вы сделать:

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;
    }
}
person Buzinas    schedule 29.09.2015
comment
Умно :) Это отлично работает для статических заголовков, но не для динамических значений в представлениях. - person Brandon; 29.09.2015

arrow_upward
0
arrow_downward

Спасибо, что указали мне правильное направление @Jeremy Danyow.

В итоге я получил:

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;

Причина в том, что указано:

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

и вызов:

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

приводит к:

Graphic Designer | Web Developer | Brandon Taylor | about

вместо:

Brandon Taylor | Web Developer | Graphic Designer | about
person Brandon    schedule 29.09.2015