Question

我知道已经多次询问过这些问题了。但我遇到了困难。我正在用ember.js创建一个应用程序。我在我的应用程序中有关于，联系，faq页面。我想在所有页面中显示页眉和页脚，但内容将根据页面进行更改。到目前为止，我有：

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>

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

Answer 1

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

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

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

Answer 2

不确定你在问什么。如果您正在谈论订单，{{outlet}}不一定是您的应用模板中的最后一件事。

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

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

2 个答案: