Question

我是一个Ember新手，仍然在我的框架周围感受一下。

我尝试为特定路线（主页）设置自定义标头，而其他所有页面都使用默认标头。默认标头名为header，主页标头名为index-header。没有任何动态内容。

标题目前在application.hbs中设置，如下所示：

<div class="page">
  {{view "header"}}
  ...
</div>

第一次尝试：

我的第一次尝试是向应用程序控制器添加isIndex方法：

isIndex : function() {
  return this.currentRouteName === 'index';
}.property('isIndex')

然后在模板中，我做了：

<div class="page">
  {#if isIndex}
     {view "index-header"}
  {else}
     {view "header"}
  {/if}
  ...
</div>

这不起作用：模板最初会选择正确的标题，然后坚持使用该标题直到整页重新加载（而不是在导航到/离开主页时切换到/从主页标题切换）。

第二次尝试：

接下来我尝试了一个出口：

<div class="page">
  {{outlet "header"}}
  ...
</div>

并在我的索引路线中：

renderTemplate : function() {
  this.render();
  this.render('index-header', {
    outlet : 'header',
    into : 'application',
    controller : 'application'
  });
}

效果很好......但随后在其他地方出现了正常的标题。我尝试将其放在应用程序路由renderTemplate中（基本上与上面相同，除了呈现header而不是index-header），但这只会在应用程序加载时运行，所以如果你从主页开始被覆盖;如果你从其他地方开始，你会得到正确的标题，直到你到达主页，然后你离开它时根本没有标题。

第三次尝试：

为了克服上述限制，我想，嘿，也许我可以在离开索引路线时重置标题！我知道这通常是通过挂钩到willTransition动作完成的，所以我把它添加到我的索引路径中：

actions : {
  willTransition : function() {
    console.log('willtransitionning');
    this.render('header', {
      outlet : 'header',
      into : 'application',
      controller : 'application'
    });
  }
}

该函数运行（我看到console.log），但它将标题留空。

这就是我被困的地方。一个可能的解决方案是创建一个Ember.Route的子类，其中定义了renderTemplate函数，将正常的标题放在适当的位置，但这感觉很奇怪。有没有更好的方法来实现这种效果？

Answer 1

使用默认的应用程序特定行为对Ember.Route进行子类化是完全合理的，我认为我会如何处理此问题。

我已经使用了子类来指定可以被子类覆盖的默认键盘快捷键。考虑它的方法是Ember的Route类提供了一堆默认行为，并且您希望为某些路由组添加其他默认值。去吧！

顺便说一句，我们可能有义务使用指定默认值的机制扩展{{outlet}};我已经看过几次这样的事了。

特定路线的自定义标题

第一次尝试：

第二次尝试：

第三次尝试：

1 个答案: