How do I control where Ember.js appends the rendered application template?

9
votes

I'm trying to switch my Ember application over to using the Ember.Router but am having an issue with where the application template gets appended. When I call App.initialize() it renders the template at the end of the document. Is there a way to specify where the rendered application template gets appended to?

My application is a rails app and I'm trying to embed an Ember application on one of my pages. I don't want to change the way my current header and footer gets rendered so ideally I would be able to specify where ember renders the template.

Here is a jsfiddle example. You can see that it renders:

Header Content 
Footer Content 
Test 1 
Test 2 
Test 3

What I'm trying for is:

Header Content
Test 1
Test 2
Test 3
Footer Content
1
ember.js

1 Answers

13
votes

Set the rootElement property of the Ember.Application: http://jsfiddle.net/vAxkL/3/

Doc: http://docs.emberjs.com/symbols/Ember.Application.html

EDIT -- Fixed the fiddle by anchoring to the 1.0.pre version: http://jsfiddle.net/vAxkL/11/