templates - 如何为登录页面定义一个模板/ View /任何内容，但为其他页面定义默认模板/ View /任何内容

Question

我完全迷失了自己，试图弄清楚我需要如何使用 ember 来控制页面模板/ View /或它们的名称。

我希望登录页面(可能还有一些其他页面)具有独特的"template"外观，并且我希望所有内部页面(在您登录后)具有不同的“模板化”导航外观 [可能是 { {render}} item] 等。

我使用 ember-tools 来生成模板/模型/ Controller /等等，所以当我进行 ember-build 时，我为每个合并在一起的文件创建了单独的文件。

问题是我不知道在这种情况下该用什么来命名以及什么是合适的 {{template}}、{{partial}}、{{outlet}} 和 {{render}}。

目前为止

• controllers/sessions/new_controller.js(用于处理登录)
• routes/sessions/new_route.js
• templates/sessions/new.hbs
• views/application.js
• templates/application.hbs 与 <script type="text/x-handlebars" data-template-name="application">{{outlet "sidebar"}}{{outlet}}</script>
• views/sidebar_view.js
• templates/sidebar.hbs
• views/topbar_view.js
• templates/topbar.hbs
• 带有 <script type="text/x-handlebars">{{yield}}</script> 的 index.html 页面
• 等...

---

我认为对于登录页面，我只需要 Controller 、路由和模板文件。但问题是，对于页面上具有侧边菜单(动态驱动)、顶部栏和内容并且外观不同的其他页面，我该怎么办？这就是我感到困惑的地方。

谁能给我指出一个像样的教程或示例。我一遍又一遍地阅读和重新阅读 ember.js 指南，但无法理解这一点。

---

笔记: 找到这个例子后http://jsfiddle.net/jorat1346/8tvRj/1/我认为这与我正在寻找的东西相似但是，我的问题是如何拆分文件。

我可以把这样的东西放在它自己的文件中吗

<script type="text/x-handlebars" data-template-name="login">
      <div class="container">
        {{outlet}}
      </div>

<script type="text/x-handlebars" data-template-name="main-template">
      <div class="container">
        {{outlet}}
      </div>
</script>

还是我需要把它们都放在索引页里？

Answer 1

这将是您的主要应用程序级别模板。这甚至会跨越可能具有页眉、页脚和模板的应用程序。通过 {{outlet}} 表达式注入(inject)其他模板。

<script type='text/x-handlebars'>
<nav class='top-bar'>
    <ul>
        <li class='name'>
            <h1>{{#linkTo 'index'}}Home{{/linkTo}}</h1>
        </li>
        <li>
            {{#linkTo 'bookmarks'}}About{{/linkTo}}
        </li>
    </ul>
</nav>
<div class="container">
    <div class="row">
        {{outlet}}
    </div>
</div>

现在您可以为每个模板创建单独的 View 文件，这些模板将被注入(inject)到您的主应用程序模板中定义的 {{outlet}} 中。

<script type="text/x-handlebars" data-template-name="about">
   <div class="about">
   </div>
</script>

您可以查看下面的 BookMark EmberJs 示例。 https://github.com/vinothbabu/emberjs-examples/tree/master/EmberJs%20-%20BookMark