How to change a component based on route or handlebars condition
<p>In my attempts to create a 'blog' app I am faced with the following challenge. </p>

<p>I have my global-header component that renders a header. This header will stay the same on all routes except if I am viewing a single blog post then I want to show header-single.</p>

<p>This is the handlebars logic I am trying to accomplish, if it makes sense:</p>

<pre><code>{{#if single}}
    {{header-single}}
{{else}}
    {{header-global}}
{{/if}}
</code></pre>

<p>Here is my route.js</p>

<pre><code>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;
</code></pre>

<p>Here is my application.hbs where I need to change the header based on route:</p>

<pre><code>&lt;!-- Page Header --&gt;
{{#if single}}
    {{header-single}}
{{else}}
    {{header-global}}
{{/if}}
&lt;!-- Main Content --&gt;

{{outlet}}

&lt;!-- Footer --&gt;
</code></pre>