Ember.js: inline handlebars template renders at root element of app

Question

On our page, we have an application "Index" associated with a root element of id "root". I'm attempting to insert a very simple handlebars template into the page inline (inside of this application).

<div id="root">
... 
    <script type="text/x-handlebars"> (this is nested about 5 levels into "root")
      {{foo}}
    <script>
...
</div>

However, when the page loads, I find the result is the metamorph placeholder moves to become the first child of "root" (even though in markup, it's quite nested).

What's going on here? No matter where I place this inline template, it keeps going to this place? How do I keep it where it is in markup?

Answer 1

The location the script templates is unrelated to where it's placed in the page. You could add it in the head of the document and it would be placed there as well, since it's the application template (due to it being unnamed). Structure of your app is defined using the router.

Example of nested routes:

http://emberjs.jsbin.com/OxIDiVU/151/edit

Additionally if you want your application to start at a different element you would set the rootElement on the App.

App.rootElement = '#fooId';

Example of rootElement:

http://emberjs.jsbin.com/bucasumo/1/edit