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

问题

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();

回答1:

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');
    }
});

回答2:

If you are using master, insertion and changing of templates is handled through outlets. Check out the official guide.

If you are using an older version of Ember, it's more of a manual process.

来源：https://stackoverflow.com/questions/11178729/what-ember-js-component-is-responsible-for-inserting-templates-into-the-dom

标签

dom

ember.js