每个路由的应用程序模板中的页面标题 - 这是正确的方法吗？

Question

在我的应用中，我改变了每条路线的网页标题。但是，页面标题在我使用的主{{outlet}}之外，即：

application.handlebars：

<h1>{{pageTitle}}</h1>

{{outlet}}

我想在每个路由的子控制器中设置pageTitle，所以这就是我正在做的事情：

App.WidgetsRoute = Ember.Route.extend
  setupController: (controller, model) ->
    @._super(controller, model)
    @controllerFor('application').set('pageTitle', 'Widgets')

这是正确的方法吗？我注意到了一个similar question，但是那里的答案并没有解释如何为只改变每个子控制器并且不一定可以计算的标题来解决这个问题。

Answer 1

您可以在setTitle中执行ApplicationRoute操作，这可以设置pageTitle中的ApplicationController：

// routes/application.js
actions: {
  setTitle: function(title) {
    this.get('controller').set('title', title);
  }
}

然后可能在子路由或控制器的init函数中。只需发送您想要的标题的动作，它应该冒泡到应用程序路径：

  init: function() {
    this.send('setTitle', 'My Page Title');
    this._super();
  },

Answer 2

执行此操作的一种稍微简单的方法（docs似乎也暗示了这一点）是：

setupController: function(controller, model) {
    this._super(controller, model);

    this.controllerFor('application').set('pageTitle', 'Main title for page');
}

修改

更好的方法是使用重新打开Route类的初始化程序（假设你使用ember-cli，你应该这样做）

// app/initializers/setup-route.js

import Ember from 'ember';

export function initialize() {
  Ember.Route.reopen({
    mainTitle: '',
    breadcrumbs: [],
    setupController: function(controller, model) {
      this._super(controller, model);

      var app = this.controllerFor('application');

      if(app) {
        app.set('mainTitle', this.mainTitle);
        app.set('breadcrumbs', this.breadcrumbs);
      }
    }
  });
}

export default {
  name: 'setup-route',
  initialize: initialize
};




// and in the route file

import Ember from 'ember';

export default Ember.Route.extend({
  mainTitle: 'Dashboard WIP',
});