CODEWITHSUNDEEP
ember.js
user663031
user663031

Reputation:

Ember.js: best practices for headers depending on sub-route

Let's say I have a route A with sub-routes A1 and A2. There is a header on all pages which is basically identical, but is a little different depending on whether it's A1 and A2.

The most obvious idea is to put the header in A's template, as in

{{! header here }}
{{outlet}}

However, at the point in time when this header is generated, I don't know whether I'm on A2 or A2. So I would need to manually examine the URL or route to see where I am, as in

isA1: Ember.computed.equal('application.currentRoute', 'A.A1')

and in the header template

{{#if isA1}} {{! A1-specific stuff }} {{/if}}

but that seems brittle and ugly.

Another alternative is to skip putting the header in A/template and turn it into a partial which is called, with some kind of parameter, from A1/template and A2/template. This would work fine, except that it seems a pity not to make use of Ember's ability to specify markup in the parent route's template and bring in the child routes' markup via {{outlet}}. This also results in re-rendering the header when I switch between A1 and A2, if that matters.

Yet another idea is to have the sub-route "send" an action to its parent requesting something be included in its header.

I've seen all of these approaches taken, but is there something more idiomatic for this case?

Upvotes: 1

Views: 146

Answers (1)

Hrishi
Hrishi

Reputation: 7138

You could just not place the header in A/template and have just an {{outlet}} there, and include the A1's header in A1/template and A2's header in A2/template.

Upvotes: 1

Related Questions