Ember.js - default template for output to socket?

Question

So I have a page that looks like this

[ Nav Bar ] | | | Content | | | 

Navigation bar I want to be permanent on all pages. Therefore, the approach I used was to set up my page as follows:

 [ Nav Bar ] {{outlet}} 

This is great, now I can display different pages in my store for different routes.

But what if I want the default template to appear in my homepage?

I managed to achieve this by redirecting / to /home , but there should be a better way to do this, which allows me to display the default homepage in / without rerouting?

Any advice appreciated

Thanks Daniel

Answer 1

To display the material in {{outlet}} on the root page /, you must define a script handler for the index:

Your navigator code will probably look like this:

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

The root page, which will be located inside {{outlet}}, is a couple:

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

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

Must work. It does not need any js code to work.

Answer 2

I must admit that this property is poorly documented and buried in the documents for Ember.View , but you can try setting the defaultTemplate property on your ApplicationView . See here for more information about this (search on the page for 'defaultTemplate').

Hope this helps.

Answer 3

The following expression in the docs helped me solve the same problem that I encountered, which is indicated in the question: Docs for Ember routing

The index template will appear in {{outlet}} in the application template. If the user goes to / favorites, Ember will replace the index template with the favorites template.

Since I use the pod structure in my project, I created an index route that has my default template, and I put the nav-bar component in the application / template.hbs file.

app / apps / template.hbs:

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

application / index / template.hbs

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