EmberJS: How to position the application template

0
votes

I'm running into a problem. I need App.rootElement = "body", because views and components will be used all over the place. I do not want to put the entire page in a handlebars template, due to SEO and other concerns. The main application template will exist somewhere in the center of the page:

<h1>Header markup</h1>

<script type="text/x-handlebars">
  <h2>Application Template</h2>

  {{outlet}}
</script>

<h1>Footer markup</g1>

However, when the page is rendered, this template is appended to the end of the body, instead of staying where the template script has been placed. (see jsbin exmaple) Is there any way to tell Ember to render the application template where it is in the markup?

One hacky solution I've found is to manually move the containing element in didInsertElement, but that seems a little heavy handed and not something that would be considered a best practice. (see jsbin example)

1
ember.js

1 Answers

0
votes

The script tag doesn't have anything to do with placement, if you want it to live somewhere create a div tag, id it, and change the rootElement to that div tag.

<script type="text/x-handlebars">
  <h2>Application Template</h2>

  {{outlet}}
</script>

...

<h1>Header markup</h1>
<div id='foo'></div>
<h1>Footer markup</h1>

App.rootElement = '#foo';