Question

我正在寻找一种方法来改变模板，具体取决于子路由是否处于活动状态。

假设我们有路由/post/1/和/post/1/comments。

我希望post.hbs能够做到这样的事情：

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

这样/post/1会产生isChildRouteActive=false而/posts/1/comments会产生isChildRouteActive=true。

可以用这种方式概念化它：

{{#if outlet}}...{{else}}...{{/if}}

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

Answer 1

我认为index儿童路线对你有好处。每个父路由都有index路由子路由，以便在其他子路由处于非活动状态时显示。请参阅此处http://guides.emberjs.com/v1.12.0/routing/defining-your-routes/

中嵌套路线中的index route部分

在你的例子中：

// 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}}

Answer 2

这对你来说可能很好。

//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);
  }
});

根据子路由是否处于活动状态来更改模板

2 个答案: