Ember.js-渲染到出口的默认模板

Question

所以我有一个页面，看起来像下面的

[ Nav Bar ]
|         |
| Content |
|         |

导航栏我希望在所有页面上保持不变。因此，我使用的方法是将我的页面设置如下：

[ Nav Bar ]
{{outlet}}

这太棒了，我现在可以为不同的路线将不同的页面呈现到我的出口中。

但是，如果我想在主页的出口中呈现一个默认模板，该怎么办？

我已经通过将/重定向到/home来实现了这一点，但必须有更好的方法来实现这一点——允许我在/处呈现默认主页，而无需重新路由？

感谢任何建议，

谢谢，Daniel

Answer 1

要在根页面/的｛｛outlet｝｝中呈现内容，您必须为index定义一个handlerbar脚本：

你的导航条代码可能看起来像这样：

<script type="text/x-handlebars">
  <div class="navbar ...">
    ...
  </div>
  {{outlet}}
</script>

将放置在｛｛outlet｝｝内的根页面是休耕的：

<script type="text/x-handlebars" id="index">
    <div class="container">
      <h1>Root page!!</h1>
    </div>
</script>

换句话说，您必须创建一个具有id="index"的句柄脚本

应该有效。它不需要任何js代码就可以工作。

Answer 2

我必须承认，Ember.View的文档中没有很好地记录和隐藏此属性，但您可以尝试在ApplicationView上设置defaultTemplate属性。请参阅此处了解更多信息（在页面中搜索"defaultTemplate"）。

希望能有所帮助。

Answer 3

文档中的以下语句帮助我解决了与问题中所述完全相同的问题：Ember路由文档

索引模板将呈现到应用程序模板中的｛｛outlet｝｝中。如果用户导航到/收藏夹，Ember将用收藏夹模板替换索引模板。

当我在项目中使用pod结构时，我创建了一个具有默认模板的索引路由，并将导航栏组件放置在application/template.hbs文件中。

app/application/template.hbs:

<div id="pageWrapper">
    <div id="navbarfixed">{{nav-bar options=options}}</div>
    <div id="pageContent">
        {{outlet}}
    </div>
</div>

app/index/template.hbs

<div id="homeWrapper"> <!--This gets rendered by default in outlet above-->
Some default content of outlet
</div>