Question

在我尝试创建“博客”应用时，我遇到了以下挑战。

我有一个呈现标题的global-header组件。这个标题将在所有路线上保持不变，除非我正在查看单个博文，然后我想显示标题单。

这是我想要完成的把手逻辑，如果有意义的话：

{{#if single}}
    {{header-single}}
{{else}}
    {{header-global}}
{{/if}}

这是我的route.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType

});

Router.map(function() {
  this.route('posts', function() {
    this.route('user', { path: '/user/:id' } );
    this.route('single', { path: '/:id', } );
  });

  this.route('page', { path: '/:slug' } );
});




export default Router;

这是我的application.hbs，我需要根据路线更改标题：

<!-- Page Header -->
{{#if single}}
    {{header-single}}
{{else}}
    {{header-global}}
{{/if}}
<!-- Main Content -->

{{outlet}}

<!-- Footer -->

Answer 1

您的要求可以通过多种方式解决。具体取决于您的使用案例。

以下是一种方法，

在application.js控制器中，您可以定义依赖于single属性的计算属性currentRouteName，并且可以在application.hbs中编写逻辑。

<强>控制器/ application.js中

single:Ember.computed('currentRouteName',function(){    
    if(this.get('currentRouteName') === 'posts.single'){
      return true;
    }
    return false;
  }),

<强>模板/ application.hbs

{{#if single}}
    {{header-single}}
{{else}}
    {{header-global}}
{{/if}}

如何根据路线或车把条件更改组件

1 个答案: