我是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函数的子类，该函数将普通头放置在适当的位置，但这感觉很奇怪。有没有更好的方法来达到这种效果？
Ember.Route使用默认的特定于应用程序的行为进行子类化是完全合理的，并且我认为我将如何解决此问题。
我已经将子类用于诸如指定可以被子类覆盖的默认键盘快捷键之类的事情。考虑的方式是Ember的Route类提供了一堆默认行为，并且您想为某些路由组添加其他默认值。去吧！
顺便说一句，对于我们来说，扩展{{outlet}}一个指定默认值的机制可能是有意义的。我已经看到过几次这样的事情。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句