根据登录状态更改导航栏 [英] Change Navbar based on login state

问题描述

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

I’ve been trying, using Rails/Ember pre-4, to do a fairly typical thing, that is have a page with a navbar and a content section. The navbar only changes on login (shows logout button when logged in and login and register buttons when logged out), not on every page change.

一开始我以为我可以在application.hbs模板中做某事，例如：

At first thought i could do something in the application.hbs template such as:

{{view navbar }}
{{outlet}}

{{view navbar}} {{outlet}}

在这里我设置了导航栏以响应登录状态更改（由状态管理器管理）。

where i set up navbar to respond to login state changes (managed by a state manager). This didn’t seem to work.

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

Then i tried something like (also in application.hbs):

{{outlet navbar}}
{{outlet}}

{{outlet navbar}} {{outlet}}

并尝试在每条路径中设置navbar，这会导致很多重复，并且没有最终有效。

and tried setting navbar in each route, which results in lots of duplication and also didn’t ultimately work.

在发布代码之前，想知道是否有人已经对这种常见情况做出了很好的解决方案，在这种情况下，页面的某些部分（例如导航栏或侧边栏）只会发生变化

Before posting code, wanted to know if anyone already has a good solution to this common situation where certain parts of your page such as a navbar or sidebar only change upon some change in app state, not on every page change.

推荐答案

有很多方法可以完成此操作。您描述的第一种方法最接近我们正在做的事情。在过去的余烬版本中，我们使用视图帮助器进行操作，今天我们使用 {{render}} ，但这是相同的基本概念。例如，application.hbs可能看起来像这样：

There are lots of ways to get this done. The first approach you described is closest to what we are doing. In past ember versions we used view helper for this, today we use {{render}} but it's the same basic concept. For example, application.hbs might look like this:

{{render navbar}} {{outlet}}

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

Now navbar.hbs can use a simple {{#if}} helper to swap links based on login state.

<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添加逻辑以跟踪和管理登录状态。

Now we add logic to NavbarController that tracks and manages login state.

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

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

In a real app NavbarController would proxy these requests to another controller, perhaps currentUserController. I've created a working sample here: http://jsbin.com/iyijaf/6/edit

这篇关于根据登录状态更改导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！