1

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

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

{{查看导航栏}} {{出口}}

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

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

{{出口导航栏}} {{出口}}

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

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

4

1 回答 1

2

有很多方法可以完成这项工作。您描述的第一种方法与我们正在做的最接近。在过去的 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);
  }
});

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

于 2013-02-06T04:43:12.330 回答