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

6
votes

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

3
ember.js

3 Answers

7
votes

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.

1
votes

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.

0
votes

The following statement in docs helped me to solve exactly the same problem I was having which is stated in the question: Ember routing docs

The index template will be rendered into the {{outlet}} in the application template. If the user navigates to /favorites, Ember will replace the index template with the favorites template.

As I am using pod structure in my project, I created an index route having my default template and I placed nav-bar component in my application/template.hbs file.

app/application/template.hbs:

<div id="pageWrapper">
    <div id="navbarfixed">{{nav-bar options=options}}</div>
    <div id="pageContent">
        {{outlet}}
    </div>
</div>

app/index/template.hbs

<div id="homeWrapper"> <!--This gets rendered by default in outlet above-->
Some default content of outlet
</div>