哪个 ember.js 组件负责将模板插入 DOM？答案

【问题标题】：What ember.js component is responsible for inserting templates into the DOM?哪个 ember.js 组件负责将模板插入 DOM？
【发布时间】：2012-06-24 15:36:39
【问题描述】：

我正在构建一个 ember.js/rails 应用程序。所有车把模板都存储在 .js 文件中。我想了解当路由器更改状态时它们是如何插入到 DOM 中的。 ember 的哪个部分会这样做？我如何告诉 ember 放置模板？

现在我只能将我的模板附加到<body> 我有一个jsFiddle here。

我知道在 Ember.Application 上设置 rootElement，但是我希望应用程序控制页面的其他元素。

把手/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();

【问题讨论】：

标签： dom ember.js

【解决方案1】：

Ember.js 中的当前实现将ApplicationView 附加到应用程序的rootElement，请参阅here。

一种可能的解决方案是覆盖ApplicationView 的appendTo，参见http://jsfiddle.net/pangratz666/m8L6Z/：

JavaScript：

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

【讨论】：

感谢您提供详细信息。我最感兴趣的是最后一个解决方案 (jsfiddle.net/pangratz666/Yu3BX) 将视图附加到现有 HTML 页面。这可以通过Router 来完成，还是我坚持将整个页面放入车把模板中？
我已经更新了我的答案，因为所述信息没有解决您的问题。
如果我只是在前一天才新...现在我浪费了一天时间把我的整个网站都放在车把上 :)
我喜欢覆盖appendTo，因为我要让应用程序控制页面的其他部分。谢谢您的帮助。 +50 给你。

【解决方案2】：

如果您使用 master，则模板的插入和更改是通过 outlet 处理的。查看the official guide。

如果您使用的是旧版本的 Ember，则更多的是手动过程。

【讨论】：

我了解网点。如何将 first 模板放入 DOM？看看 jsFiddle。