Ember - установить динамический заголовок страницы для маршрута

Question

Я настроил свое приложение Ember для использования структуры pod. Я создал компонент topbar-nav, который я отображаю на главной странице. В компоненте topbar-nav я установил заголовок страницы, который я хотел бы установить автоматически для каждого маршрута, поэтому для маршрута панели мониторинга заголовок должен быть "Панель мониторинга", для панели / категорий заголовок должен быть категориями и так далее.

Вот моя структура приложения:

• приложение
  • приложение
  • компоненты
    • topbar-нав
  • приборная доска
  • категории

Маршрутизатор приложения - router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('dashboard', function() {
    this.route('categories');
  });
});

export default Router;

И шаблоны:

применение / template.hbs

<aside>
    {{sidebar-nav}}
</aside>

<main>
    <header>
        {{topbar-nav}}
    </header>

    {{outlet}}
</main>

компоненты / topbar-нав / template.hbs

<nav class="topbar-nav">
    <div class="text-center">
        <h5 class="page-title">{{title}}</h5>
    </div>
</nav>

{{yield}}

компоненты / topbar-нав / component.js

import Ember from 'ember';

export default Ember.Component.extend({
    title: 'Component title'
});

Как вы уже можете сказать, заголовок, который я получаю, называется "Название компонента".

Самый точный ответ, который я получил к настоящему времени, таков:

Эмбер динамические заголовки

хотя, попробовав много разных подходов, я не смог найти хорошего решения.

Есть ли чистый и простой способ сделать это? Любые идеи и решения очень ценятся.

Answer 1

Я хотел подобный динамический заголовок и нашел эту страницу. Итак, вот мое решение, основанное на замечании @AcidBurn, что application controller имеет currentRouteName имущество.

Если вы хотите последний дочерний маршрут:

screen_title: Ember.computed('currentRouteName', function () {
    let route = this.get('currentRouteName').split('.');

    // Return last route name (e.g. categories from dashboard.categories)
    return route[route.length - 1];
}),

Если вы хотите родительский маршрут:

screen_title: Ember.computed('currentRouteName', function () {
    let route = this.get('currentRouteName').split('.');

    // Return parent route name (e.g. reports from reports.index)
    return route[0];
}),

Answer 2

ember-page-title кажется лучше, чем ember-cli-document-title (лучше документы + API)