Названия страниц в шаблоне приложения для каждого маршрута - как правильно это сделать?

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')

Это правильный способ сделать это? Я заметил похожий вопрос, но ответ там не объяснял, как это сделать для заголовков, которые изменяют только контроллер на ребенка и не обязательно рассчитываются.

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

Несколько более простой способ сделать это (что, как представляется, также подразумевается в документации) заключается в следующем:

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