Ember中的动态导航

Question

我的网站布局并没有真正改变太多，但布局中的内容发生了变化。我无法在ember中找到一个非常好的方法。这基本上是我到目前为止所做的：

模板/ application.hbs

<header>
  <span class="title">{{title}}</span>
</header>
<nav>
  {{link-to 'Home' 'index'}}
  {{link-to 'About' 'about'}}
</nav>
<main>
  {{outlet}}
</main>

app.js

/* Other app stuff... */

Ember.Route.reopen({
  defaultTitle: Ember.computed('routeName', function() {
    return this.get('routeName')
      .camelize()
      .capitalize()
      .replace(/\./g, ' - ')
      .replace(/([a-z])([A-Z])/g, '$1 $2');
  }),
  activate() {
    this._super(...arguments);
    this.updateTitle();
  },
  updateTitle: Ember.observer('title', function() {
    let title = this.get('title') || this.get('defaultTitle');
    this.controllerFor('application').set('title', title);
  }
});

这似乎没问题。如果我想覆盖标题，我可以将title: 'Much better name than the default'添加到路线中。

然而，感觉就像反模式。让我们说我想根据模型为某些路线添加字幕。首先，我会修改模板：

模板/ application.hbs

<header>
  <span class="title">{{title}}</span>
  <span class="subtitle">{{subtitle}}</span>
</header>
<!-- the rest is the same -->

然后，理想情况下，在路由或控制器上我可以添加一个别名（例如subtitle: Ember.computed.alias('model.location')），但我必须创建一个新的钩子并在模型更改时手动设置新值。这一切看起来都很笨重：

路由/ about.js

afterModel(model) {
  this.set('subtitle', model.get('location'));
}

app.js

activate() {
  /* same as before */
  this.updateSubtitle();
},
updateSubtitle: Ember.observer('subtitle', function() {
  this.controllerFor('application').set('subtitle', this.get('subtitle'));
}

似乎application.hbs是放置基本布局的正确位置，但感觉我做错了。更新标题应该更简单。我想我可以做{{currentRoute.title}}之类的事情。

如果我想动态更新导航链接，我会遇到类似的问题。看起来我应该能够做类似的事情：

模板/ application.js中

<nav>
  {{#each router.routes as |route|}}
    {{link-to route.title route.href}}
    {{#if route.isActive}}
      {{#each route.subroutes as |subroute|}}
        {{link-to subroute.title subroute.href class="subroute"}}
      {{/each}}
    {{/if}}
  {{/each}}
</nav>

是否有某种最佳实践来处理这样的动态导航？在Aurelia，您可以非常轻松地执行${router.currentInstruction.config.title}或

之类的操作

<a repeat.for="route of router.navigation"
   href.bind="route.href"
   class="${route.isActive ? 'is-active' : ''}"
>${route.title}</a>

我还没有找到与Ember相似的东西，但它似乎应该是一个相对常见的范例。