5

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

这是我的应用程序结构：

  • 应用程序
    • 应用
    • 成分
      • 顶栏导航
    • 仪表板
    • 类别

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

和模板：

应用程序/模板.hbs

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

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

    {{outlet}}
</main>

组件/topbar-nav/template.hbs

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

{{yield}}

组件/顶栏导航/component.js

import Ember from 'ember';

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

如您所知，我渲染的标题是“组件标题”

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

Ember 动态标题

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

有没有一种干净简单的方法来做到这一点？非常感谢任何想法和解决方案。

4

2 回答 2

2

我想要一个类似的动态标题并找到了这个页面。所以这是我的解决方案，基于@AcidBurn's note that the application controllerhas a currentRouteNameproperty。

如果您想要最后一条子路线：

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];
}),
于 2016-02-08T06:29:52.657 回答
0

ember-page-title 现在似乎比 ember-cli-document-title 更好（更好的 docs+api）

于 2018-03-30T07:13:10.730 回答