Question

我一直在尝试使用Rails / Ember pre-4来做一个相当典型的事情，那就是有一个带有导航栏和内容部分的页面。导航栏仅在登录时更改（登录时显示登出按钮，登出时显示登录和注册按钮），而不是每次更改页面。

起初我认为我可以在application.hbs模板中执行某些操作，例如：

我设置导航栏以响应登录状态更改（由状态管理器管理）。这似乎不起作用。

然后我尝试了类似的东西（也在application.hbs中）：

并尝试在每条路线中设置导航栏，这会导致大量重复，并且最终无法正常工作。

在发布代码之前，想知道是否有人已经对这种常见情况有一个很好的解决方案，其中页面的某些部分（例如导航栏或侧边栏）仅在应用状态发生某些变化时发生变化，而不是每次更改页面时都会发生变化。

Answer 1

有很多方法可以完成这项工作。您描述的第一种方法与我们正在做的最接近。在过去的ember版本中，我们使用了视图助手，今天我们使用{{render}}，但它是相同的基本概念。例如，application.hbs可能如下所示：

{{render navbar}} {{outlet}}

现在navbar.hbs可以使用简单的{{#if}}帮助程序根据登录状态交换链接。

<div class="navbar">
  <div class="navbar-inner">
    {{#linkTo index class="brand"}}My App{{/linkTo}}
    <ul class="nav">
      <li>{{#linkTo index}}Home{{/linkTo}}</li>
      <li>{{#linkTo about}}About{{/linkTo}}</a></li>
    </ul>
    <ul class="nav pull-right">
     {{#if isAuthenticated}}
     <li><a {{action logout}} href="#">Logout</a></li>
     {{else}}
     <li><a {{action login}} href="#">Login</a></li>
     {{/if}}
    </ul>
  </div>
</div>

现在我们向NavbarController添加逻辑，用于跟踪和管理登录状态。

App.NavbarController = Ember.ArrayController.extend({
  isAuthenticated: false,
  login: function() {
    this.set('isAuthenticated', true);
  },
  logout: function() {
    this.set('isAuthenticated', false);
  }
});

在真正的应用中，NavbarController会将这些请求代理到另一个控制器，可能是currentUserController。我在这里创建了一个工作示例：http://jsbin.com/iyijaf/6/edit

根据登录状态更改导航栏

1 个答案: