Question

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

{{outlet header}}
{{outlet}}

和mainnav.hbs中的另一个出口动态处理子区域。

在每个路径中我定义了renderTemplate函数。这工作正常，但是相当繁琐，因为每当我创建新路由时我都必须复制代码这是例如索引路径如何：

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

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

Answer 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}}减少了代码重复，但代价是模板中的某些逻辑。

菜单栏取决于路线/登录状态

1 个答案: