Ember.js js是在所有页面中添加页眉和页脚的最佳方法

我知道这个问题已经被问了好几次了。但我在这方面有困难。我正在使用ember.js创建一个应用程序。我的应用程序中有关于、联系、常见问题解答页面。我想在所有页面中显示页眉和页脚，但内容将根据页面进行更改。到目前为止，我已：

Application Header
Application Footer
Application Home Page Contents

但是我想要这样的。基本上，所有页面的页眉和页脚都相同，但内容会发生变化：

Application Header
Application Home Page Contents
Application Footer

下面是我的代码：app.js

App = Ember.Application.create();
App.Router.map(function() {
    this.resource("about");
    this.resource("contact");
    this.resource("faq");
});

index.html

<script type="text/x-handlebars">
    <h2>Application Header</h2>
    <h2>Application Footer</h2>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <div id="contents">
       <h2> Application Home Page Contents</h2>
    </div>
</script>
<script type="text/x-handlebars" data-template-name="about">
    <h2>Application About Page</h2>
</script>
<script type="text/x-handlebars" data-template-name="contact">
    <h2>Application contact page</h2>
</script>
<script type="text/x-handlebars" data-template-name="faq">
    <h2>Application FAQ page</h2>
</script>

应用程序头
应用程序页脚
{{outlet}}
应用程序主页内容
关于页面的应用程序
应用程序联系页
应用程序常见问题页面

---

提前感谢。示例代码将不胜感激。

不确定您的要求。如果您谈论的是订单，

{{outlet}

不一定是应用程序模板中的最后一件事

---

检查此小提琴：

我使用主要的应用程序路径，因此我的应用程序模板是：

<script type="text/x-handlebars" data-template-name="application">
    {{partial "header"}}
    {{outlet}}
    {{partial "footer"}}
</script>

{{部分“头”}
{{outlet}}
{{部分“页脚”}

---

您还可以使用视图或渲染辅助对象替换部分，具体取决于您是否需要更改控制器或是否需要在脚本中直接访问视图。

最简单的方法是将页脚渲染为插座中的

部分
。然后，您可以在保持模板干燥的同时更改每页的标记。当然，对于标题也可以这样做。请参见此处：页眉和页脚文件在应用程序中的位置？
app/templates/header.hbs
和
app/templates/footer.hbs
或您正在使用的任何扩展名。我知道这会奏效，但不知道把它们放在那里是否是余烬大会。