CODEWITHSUNDEEP
ember.jshandlebars.js
odinp123
odinp123

Reputation: 35

How to change a component based on route or handlebars condition

In my attempts to create a 'blog' app I am faced with the following challenge.

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.

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

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

Here is my 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;

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

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

{{outlet}}

<!-- Footer -->

Upvotes: 0

Views: 1206

Answers (1)

Ember Freak
Ember Freak

Reputation: 12872

Your requirement can be solved in many different ways.it depends on your use case.

Below is one approach,

In application.js controller, you can define computed property single which depends on currentRouteName property and in application.hbs you can write your logic.

controllers/application.js

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

templates/application.hbs

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

Upvotes: 1

Related Questions