根据登录状态更改导航栏

Question

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

起初，我认为我可以在application.hbs模板中做一些事情，例如：

{{view navbar}} {{outlet}}

在那里我设置导航栏以响应登录状态的更改(由状态管理器管理)。这似乎不管用。

然后我尝试了一下(也是在application.hbs中)：

{{outlet导航条}} {{outlet}}

并尝试在每条路径中设置导航栏，这会导致大量重复，并且最终也不起作用。

在发布代码之前，我想知道是否有人已经有了一个很好的解决方案来解决这种常见的情况，即页面的某些部分，如导航栏或侧边栏，只在应用程序状态发生变化时更改，而不是在每次页面更改时更改。

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