3

我已经迷失在试图弄清楚我需要如何或做什么来控制页面模板/视图/或它们被称为的任何东西。

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

我使用 ember-tools 来生成模板/模型/控制器/等，因此当我进行 ember-build 时，我为每个合并在一起的文件都有单独的文件。

问题是我不知道如何命名事物以及在这种情况下适合使用什么 {{template}}、{{partial}}、{{outlet}} 和 {{render}}。

到目前为止我有

  • controllers/sessions/new_controller.js（用于处理登录）
  • 路线/会话/new_route.js
  • 模板/会话/new.hbs
  • 意见/application.js
  • 模板/application.hbs WITH<script type="text/x-handlebars" data-template-name="application">{{outlet "sidebar"}}{{outlet}}</script>
  • 意见/sidebar_view.js
  • 模板/sidebar.hbs
  • 意见/topbar_view.js
  • 模板/topbar.hbs
  • index.html页面有<script type="text/x-handlebars">{{yield}}</script>
  • ETC...

我认为对于登录页面，我只需要控制器、路由和模板文件。但问题是，对于其他页面，我该怎么做呢？这些页面有sidemenu（动态驱动）、topbar 和页面上的内容，并且对它们有不同的外观？这就是我感到困惑的地方。

有人可以指点我一个像样的教程或示例。我一遍又一遍地阅读 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>

还是我需要将它们全部放在索引页面中？

4

2 回答 2

2

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

<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>

现在，您可以为每个模板拥有单独的视图文件，这些文件将被注入到您的主应用程序模板中定义的 {{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

于 2013-09-19T16:40:40.003 回答
2

好的，我在http://discuss.emberjs.com/t/can-i-switch-the-application-hbs-or-set-some-sort-of-layout-inheritance/2688上从@rlivsey 得到了答案/3

App.Router.map(function(){
    this.resource('login');
    this.resource('main', {path: '/'}, function(){
        // the rest of your application's routes
    })
})

然后您登录的应用程序布局进入main模板并且不会影响login模板。

您的应用程序模板将只是{{outlet}}.

经过测试，这正是我想要的！

于 2013-09-20T13:14:45.017 回答