Question

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

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

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

我将内容本身包含在插座内（单柱，后列表等）。但是，我想根据当前路线更改上面模板的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的{{3}}存储当前路线的完整路径。因此，在IndexController内指定它currentPath 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>

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

2 个答案: