Ember.js - 渲染到插座的默认模板？

Question

所以我有一个如下所示的页面

[ Nav Bar ]

|         |
| Content |
|         |

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

[ Nav Bar ]

{{outlet}}

这很棒，我现在可以将不同的页面呈现在不同路线的插座中。

但是如果我想将默认模板渲染到我的主页的插座中呢？

我已经设法通过重定向/到/home来实现这一点，但必须有一个更好的方法来做到这一点，这允许我在/没有重新路由时呈现默认主页？

任何建议赞赏，

谢谢，丹尼尔

Answer 1

要在根页面/ {{outlet}}中呈现内容，您必须为index定义处理程序栏脚本：

您的导航栏代码可能如下所示：

<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}}。 如果用户导航到/ favorites，Ember将使用收藏夹模板替换索引模板。

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

应用程序/应用/ template.hbs：

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

应用程序/索引/ template.hbs

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