2

所以在我的 ember-app 中，我想要一个主导航和一个子导航。根据我想要不显示菜单、主导航或主导航 + 子导航的路线。所以我一直在考虑处理它的方式是 application.hbs 中有两个出口

{{outlet header}}
{{outlet}}

和 mainnav.hbs 中的另一个出口来动态处理子导航。

在每条路线中，我都定义了 renderTemplate 函数。这工作得很好但很乏味，因为每当我创建一个新路由时我都必须复制代码这是例如索引路由的样子：

this.render('index');
this.render('layouts/_mainnav', {
    outlet:'header'
});

虽然复制的代码并不多，但仍然必须为每条路线完成，而且似乎可以对其进行优化。那么有没有可以在不复制代码或任何完全不同的方式的情况下完成？

4

1 回答 1

1

如果您在应用程序中维护与用户会话/路由相关的某些状态，则可以在application模板中使用它来进行条件渲染。各个模板可以用{{partial}}助手组织起来，以保持它们分开。

例如，标题部分将由以下人员提供，

<script type='text/x-handlebars' data-template-name='_header'>
  {{partial 'mainmenu'}}
  {{#if App.loggedIn}}
    {{partial 'submenu'}}
  {{/if}}
</script>

<script type='text/x-handlebars' data-template-name='_mainmenu'>
  <div class="btn-group">
    <button class="btn" {{action 'login'}}>Login</button>
    <button class="btn" {{action 'logout'}}>Logout</button>
  </div>  
</script>

<script type='text/x-handlebars' data-template-name='_submenu'>
  <div class="btn-group">
    <button class="btn">Profile</button>
    <button class="btn">Settings</button>
  </div>  
</script>

这是完整的jsbin示例。

这是您可能需要根据界面设计的复杂性做出的权衡。renderTemplate提供了更大的灵活性，而{{partials}}在应用程序模板中减少了代码重复，代价是模板中的一些逻辑。

于 2013-07-03T05:22:45.487 回答