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

【问题标题】：Ember.js - default template to render into an outlet?Ember.js - 渲染到插座的默认模板？
【发布时间】：2013-08-04 18:31:29
【问题描述】：

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

[ Nav Bar ]

|         |
| Content |
|         |

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

[ Nav Bar ]

{{outlet}}

这太好了，我现在可以将不同的页面渲染到我的插座中以用于不同的路线。

但是，如果我希望将默认模板呈现到主页的插座中怎么办？

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

任何建议表示赞赏，

谢谢，丹尼尔

【问题讨论】：

标签： ember.js

【解决方案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代码即可工作。

【讨论】：

感谢您的回答。不幸的是，我已经有了一个“索引”模板——即包含导航栏和出口的模板...
那么你应该只需要在没有任何 id 或 data-template-name 的车把内移动导航栏。检查这个：jsfiddle.net/jorat1346/8tvRj/1你的主页上有内容，为什么这个模型不起作用。
对——我对你的建议的困难是，我有一个模型需要用来填充导航栏，但由于似乎没有为应用程序调用路由器（仅'索引'），我无处填充我的模型。不过考虑一下，我想我可以通过创建 MyApp.ApplicationController 并在 init() 中填充我的模型来解决这个问题。感谢您的所有建议，将尝试其中一些。

【解决方案2】：

我必须承认这个属性没有得到很好的记录并且隐藏在Ember.View 的文档中，但是您可以尝试在您的ApplicationView 上设置defaultTemplate 属性。有关这方面的更多信息，请参阅here（在页面中搜索“defaultTemplate”）。

希望对你有帮助。

【讨论】：

【解决方案3】：

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

索引模板将被渲染到应用程序模板中的 {{outlet}} 中。如果用户导航到 /favorites，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>

【讨论】：