What ember.js component is responsible for inserting templates into the DOM?

dom, ember.js

Solution

The current implementation in Ember.js appends the `ApplicationView` to the `rootElement` of the Application, see here.

One possible solution would be to overwrite the `appendTo` of your `ApplicationView`, see http://jsfiddle.net/pangratz666/m8L6Z/:

JavaScript:

App.ApplicationView = Em.View.extend({
    templateName: 'application',
    appendTo: function(){
        this._super('#content');
    }
});

Problem

I am building an ember.js/rails application. All the handlebar templates are stored in .js files. I'd like to understand how they get inserted into the DOM when the router changes state. Which part of ember does this? How do I tell ember to place templates? Right now I can only get my templates appended to the `<body>` I have a jsFiddle here. I am aware of setting `rootElement` on Ember.Application, however I want the app to control other elements of the page. Handlebars / HTML: ``` <script type="text/x-handlebars" data-template-name="application"> <h2>I'm the content</h2> <p>This should be inbetween the header &amp; footer</p> <p><strong>time</strong> {{time}}</p> </script> <header> <h1>Application</h1> </header> <article> <div id="content"></div> </article> <footer> <a href="http://blog.deanbrundage.com" target="_blank">by Dean</a> </footer> ``` ​JavaScript: ``` window.App = Ember.Application.create(); App.Router = Em.Router.extend({ initialState: 'root.home', root: Em.Route.extend({ home: Em.Route.extend({ view: App.ApplicationView }) }) }); App.ApplicationController = Em.Controller.extend({ time: Date() }); App.ApplicationView = Em.View.extend({ templateName: 'application' }); App.initialize(); ```

Original source