灰烬 - 为每条路线设置动态页面标题

Question

我已经设置了我的Ember应用程序来使用pod结构.我创建了一个topbar-nav组件,我在主页面上显示.在topbar-nav组件中,我设置了页面标题,我希望每个路由自动设置,因此对于仪表板路径,标题应该是仪表板,仪表板/类别标题应该是类别等等.

这是我的app结构:

• 应用
  • 应用
  • 组件
    • 顶栏,导航
  • 仪表板
  • 类别

应用程序路由器 - 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>

组件/顶栏-NAV/template.hbs

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

{{yield}}

组件/顶栏-NAV/component.js

import Ember from 'ember';

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

你可以告诉我已经呈现的标题是' 组件标题 '

我现在得到的最准确的答案是这一个:

Ember动态头衔

虽然在尝试了很多不同的方法后,我找不到一个好的解决方案.

这样做有干净简单的方法吗？任何想法和解决方案都非常感谢.

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];
}),