How to do this templating in emberjs?

Question

I've got an application template that houses an outlet in a section tag, and also includes some other tags like a header, footer etc. The outlet gets used when I root to, say, a posts route and it uses the PostsController. The page then gets filled out with the posts template. However when I navigate to the home route /, then the #main section is blank.

<header>My header</header>

<section id='main'>
  {{ outlet }}
</section>

<footer>My footer</footer>

I'd like to use that outlet to display something when I'm at the home route, but have that outlet filled with something else (like the posts template) when I navigate to posts. I've tried doing something like adding:

{{#if isRoot}}
  lorem ipsum
{{/if}}

and then adding this to the applicationController:

App.ApplicationController = Ember.Controller.extend({
  isRoot: true
})

but even when I navigate to posts that remains true (as I understand it, because the other controllers are nested inside the application controller). What's an idiomatic way to solve this?

Kingpin2k Kingpin2k · Accepted Answer · 2014-10-16T14:48:23

The index route was created for this exact problem. It's used when you hit a endpoint and no deeper, allowing you to show something when you are just at that endpoint.

App.IndexRoute = Em.Route.extend({
  // you can return a different model, or just use the application's model
});


<script type="text/x-handlebars" data-template-name="index">
  I'm only at the root of my app!
</script>

How to do this templating in emberjs?

1 Answers