CODEWITHSUNDEEP
ember.js
futuraprime
futuraprime

Reputation: 5578

Custom header for a specific route

I'm an Ember novice, still feeling my way around the framework a bit.

I'm trying to set up a custom header for a particular route (the homepage), while all other pages will use a default header. The default header is called header, and the homepage header is called index-header. Neither has any dynamic content.

The header is currently set up in application.hbs, like this:

<div class="page">
  {{view "header"}}
  ...
</div>

First Attempt:

My first attempt was to add an isIndex method to the application controller:

isIndex : function() {
  return this.currentRouteName === 'index';
}.property('isIndex')

Then in the template, I did:

<div class="page">
  {#if isIndex}
     {view "index-header"}
  {else}
     {view "header"}
  {/if}
  ...
</div>

This did not work: the template would pick the correct header initially, and then stuck with that header until a full page reload (instead of switching to/from the homepage header when navigating to/away from the homepage).

Second Attempt:

Next I tried an outlet:

<div class="page">
  {{outlet "header"}}
  ...
</div>

and in my index route:

renderTemplate : function() {
  this.render();
  this.render('index-header', {
    outlet : 'header',
    into : 'application',
    controller : 'application'
  });
}

which worked great... but then there's getting the normal header to appear everywhere else. I tried putting it in the application route's renderTemplate (basically the same as above, except rendering header instead of index-header), but that only runs when the application loads, so if you start on the homepage it's overwritten; if you start somewhere else, you get the right header until you reach the homepage and then you get no header at all when you leave it.

Third Attempt:

To get around the limit of the above, I figured hey, maybe I could just reset the header on leaving the index route! I gather that this is usually done by hooking on to the willTransition action, so I added this to my index route:

actions : {
  willTransition : function() {
    console.log('willtransitionning');
    this.render('header', {
      outlet : 'header',
      into : 'application',
      controller : 'application'
    });
  }
}

The function runs (I see the console.log), but it leaves the header blank.

So that's where I'm stuck. A possible solution is to create a subclass of Ember.Route with a defined renderTemplate function that puts the normal header in place, but this feels pretty strange. Is there a better way to achieve this effect?

Upvotes: 1

Views: 448

Answers (1)

Yehuda Katz
Yehuda Katz

Reputation: 28703

Subclassing Ember.Route with default app-specific behavior is totally reasonable, and how I think I would approach this problem.

I've used subclasses for things like specifying default keyboard shortcuts that can be overridden by subclasses. The way to think about it is that Ember's Route class provides a bunch of default behavior, and you want to add additional defaults for some group of routes. Go for it!

Incidentally, it probably makes sense for us to extend {{outlet}} with a mechanism to specify a default; I've seen something like this crop up a few times.

Upvotes: 3

Related Questions