在其他模板中更改主页的一部分

Question

我有一个博客，其索引模板如下所示：

<header class="entry-header">
  <h1 class="entry-title">BLOG</h1>
</header>

<div class="entry-content">
  {{outlet}}
</div>

我将内容本身包含在出口中（单个-post、post-列表等）。不过我想根据当前路由修改上面模板h1的内容

你会怎么做？

Answer 1

您可以将 h1 移动到应用程序模板并在 ApplicationController 上使用属性，它可以在其他路由中设置为所需的值。像这样：

App.Router.map(function() {
  this.route('other');
});

App.OtherRoute = Em.Route.extend({
  afterModel: function() {
    this.controllerFor('application').set('elementContent', '123')
  }
});

App.ApplicationController = Em.Controller.extend({
  elementContent: 'BLOG'
});

Demo. 如果它没有在应用程序模板中声明，那么您可以在控制您的 index-template 的任何控制器上使用属性，并在任何应该更改 h1 内容的路由中使用 this.controllerFor('controllerControllingIndexTemplate').set('property', 'value')。它应该始终有效。

Answer 2

ApplicationController 的 currentPath stores the full path of the current route. Therefore within IndexController specify that it needs ApplicationController 并使用其 currentPath 属性填充 h1.entry-title 内容：

App.IndexController = Ember.Controller.extend({
  needs: ['application'],
  currentPath: Ember.computed.alias('controllers.application.currentPath'),

  isInPostsRoute: Ember.computed.equal('currentPath', 'posts'),
  isInUsersRoute: Ember.computed.equal('currentPath', 'users'),
  // etc
});

index.hbs:

<header class="entry-header">
  <h1 class="entry-title">
    {{#if isInPostsRoute}}
      Posts
    {{else}}{{#if isInUsersRoute}}
      Users
    {{/if}}{{/if}}
  </h1>
</header>

在其他模板中更改主页的一部分

Change part of homepage in other template

handlebars.js

ember.js