EmberJS：如何定位应用程序模板答案

【问题标题】：EmberJS: How to position the application templateEmberJS：如何定位应用程序模板
【发布时间】：2014-12-12 19:48:28
【问题描述】：

我遇到了问题。我需要App.rootElement = "body"，因为视图和组件将在所有地方使用。由于 SEO 和其他问题，我不想将整个页面放在车把模板中。主应用程序模板将存在于页面中心的某处：

<h1>Header markup</h1>

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

  {{outlet}}
</script>

<h1>Footer markup</g1>

但是，当页面被渲染时，这个模板被附加到正文的末尾，而不是停留在模板脚本所在的位置。（请参阅jsbin exmaple）有没有办法告诉 Ember 在标记中的位置呈现应用程序模板？

我发现的一个 hacky 解决方案是手动移动 didInsertElement 中的包含元素，但这似乎有点笨拙，并不是最佳实践。（见jsbin example）

【问题讨论】：

标签： ember.js

【解决方案1】：

脚本标签与放置无关，如果您希望它存在于某个地方，请创建一个 div 标签，对其进行标识，然后将 rootElement 更改为该 div 标签。

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

【讨论】：

这就是问题所在。 rootElement 需要包围整个页面，但我不能将整个页面放在车把模板中。如果我可以将 rootElement 本地化到那个位置并将视图和组件放置在它之外而不用 Ember 抱怨，它会起作用。