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

Question

我遇到了问题。我需要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）

Answer 1

脚本标记与展示位置没有任何关系，如果您希望它在某处创建div标记，id，并将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';