ルートまたはハンドルバーの状態に基づいてコンポーネントを変更する方法

Question

私は「ブログ」アプリを作成しようとした際、次のような課題に直面しています。

ヘッダーをレンダリングするグローバルヘッダーコンポーネントがあります。このヘッダーは、単一のブログ投稿を表示しているときにヘッダーシングルを表示する場合を除いて、すべてのルートで同じままです。

これは私が達成しようとしているハンドルバーのロジックである、それは理にかなっている場合：ここで

{{#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コントローラで

である、あなたはcurrentRouteName性質上、あなたのロジックを記述することができますapplication.hbsに依存して計算されたプロパティsingleを定義することができます。

コントローラ/ application.js

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

テンプレート/

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