Ember.js - default template to render into an outlet?

Question

So I have a page which looks like the following

[ Nav Bar ]

|         |
| Content |
|         |

The nav bar I want to be constant across all pages. So the approach I used was to set my page up as follows:

[ Nav Bar ]

{{outlet}}

This is great, I can now render different pages into my outlet for different routes.

But what if I want a default template to be rendered into the outlet for my home page?

I've managed to achieve this by redirecting / to /home, but there must be a better way to do this which allows me to render a default home page at / without re-routing?

Any advice appreciated,

Thanks, Daniel

Answer 1

To render stuff in the {{outlet}} at the root page /, you have to define a handlerbar script for index:

Your navbar code probably look like this:

<script type="text/x-handlebars">
  <div class="navbar ...">
    ...
  </div>

  {{outlet}}
</script>

The root page that will be place inside {{outlet}} is the fallowing:

<script type="text/x-handlebars" id="index">
    <div class="container">
      <h1>Root page!!</h1>
    </div>
</script>

In other words, you have to create a handlebar script that will have an id="index".

Should work. It doesn't need any js code to work.

Answer 2

I must admit this property is not well documented and buried in the docs for Ember.View but you could try setting the defaultTemplate property on your ApplicationView. See here for more info on that (search in the page for 'defaultTemplate').

Hope it helps.