Ember.js 模板中的更改取决于子管线是否处于活动状态

我正在寻找一种根据子路由是否处于活动状态来更改模板的方法

假设我们有路线

/post/1/

和

/post/1/comments

我希望

post.hbs

能够做到以下几点：

<div class={{if isChildRouteActive 'compact' 'expanded'}}>...</div>
{{outlet}}

---

如何将此属性公开给我的所有模板？

我认为

索引

子路由对您有好处。每个父路由都有

索引

路由子路由，以便在其他子路由处于非活动状态时显示某些内容。请参见此处嵌套路由部分中的

索引路由

：

在您的示例中：

// post template
{{outlet}}

//post/index template
You see this text when post.comments route is inactive. If you activate post.comments this text will dissapear and you will see comments quantity.

//post/comments template
Comments: {{comments.length}}

---

也许你觉得这个不错

//post controller
import Ember from 'ember';
export default Ember.Controller.extend({
   isChildRouteActive: false,
});

//child route
import Ember from 'ember';
export default Ember.Route.extend({

  parentController: Ember.computed( function() {
    return this.controllerFor('post');
  }),

  setupController: function(controller, model) {
    this._super(controller, model);
    this.get('parentController').set('isChildRouteActive', false);
  },

  deactivate: function() {
    this.get('parentController').set('isChildRouteActive', true);
  }
});

---

这允许使用

{{if}}

而不是我需要的

{else}

。似乎不太理想。这看起来很不错，但有没有办法在不知道父控制器的显式名称的情况下实现这一点？

//post controller
import Ember from 'ember';
export default Ember.Controller.extend({
   isChildRouteActive: false,
});

//child route
import Ember from 'ember';
export default Ember.Route.extend({

  parentController: Ember.computed( function() {
    return this.controllerFor('post');
  }),

  setupController: function(controller, model) {
    this._super(controller, model);
    this.get('parentController').set('isChildRouteActive', false);
  },

  deactivate: function() {
    this.get('parentController').set('isChildRouteActive', true);
  }
});