ember.js 在所有页面中添加页眉和页脚的最佳方式答案

【问题标题】：ember.js best way to add header and footer across all pagesember.js 在所有页面中添加页眉和页脚的最佳方式
【发布时间】：2014-07-25 20:42:39
【问题描述】：

我知道这个问题已经被问过好几次了。但我遇到了困难。我正在使用 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>

在此先感谢。示例代码将不胜感激。

【问题讨论】：

最简单的方法是将页脚呈现为插座内的partial。然后，您可以按页面更改标记，同时保留模板的 DRYness。当然，标题也可以这样做。见这里：emberjs.com/guides/templates/rendering-with-helpers/…

标签： ember.js

【解决方案1】：

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

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

您还可以根据是否需要更改控制器或直接在脚本中访问视图来将部分替换为视图或渲染助手。

【讨论】：

页眉和页脚文件在应用中的什么位置？
app/templates/header.hbs 和 app/templates/footer.hbs 或您使用的任何扩展名。我知道这会起作用，但不知道将它们放在那里是否是 Ember 约定。

【解决方案2】：

不知道你在问什么。如果您谈论的是顺序，{{outlet}} 不一定是您的应用程序模板中的最后一件事。

检查这个小提琴：http://jsfiddle.net/shhQuiet/d799u/

【讨论】：