CODEWITHSUNDEEP
ember.js
snovity
snovity

Reputation: 1173

Layout for a group of Ember routes without affecting URL

Let's say I have a following router:

Router.map(function() {
  this.route('intro');
  this.route('about');
  this.route('terms-of-use');
});

What I want to do is to have a parent template for routes about and terms-of-use without modifying their path, something like:

Router.map(function() {
  this.route('intro');
  this.route('some-layout', /* zero length path options */) {
    this.route('about');
    this.route('terms-of-use');
  }
});

I was considering putting a flag on ApplicationController and using it in application template to show different stuff for intro and other routes. But it will create some mess.

Then it is possible to use custom base route class for about and terms-of-use with overriden renderTemplate that would simulate parent template. But this also wouldn't look nice, configuration of template nesting would be spread across the whole application.

It seems optimal to do it in router, but is it possible?

My current solution is this flag on ApplicationController

anotherLayout: function() {
  return ['about', 'terms-of-use'].indexOf(this.currentRouteName) !== -1;
}.property('currentRouteName')

Upvotes: 1

Views: 99

Answers (1)

zeppelin
zeppelin

Reputation: 1134

Unfortunately you can't define a route that doesn't have a URL (well, you can, when you do { path: '/' }, but only once - which most likely won't do)

The good news is you can specify view classes for both about and terms-of-use.

App.AboutView = App.TermsOfUseView = Ember.View.extend({
  layoutName: 'some-layout'
});

Then the some-layout Handlebars template with a {{yield}} helper, like so:

<div class="some-layout">
  {{yield}}
</div>

Here is how it works: when Ember renders a route's template, it first checks if there is a view class existing. If so, it'll set it's template property. Since we use the layout property, it won't be overwritten. Not quite perfect as it won't be a true parent for these routes, but in most cases it does the job.

Also I think Ember will support the feature you described, since it does make perfect sense, and I know a lot of people suffer from the lack of it (me included).

More about layouts: http://emberjs.com/guides/views/adding-layouts-to-views/

Upvotes: 1

Related Questions