Ember.js 根据登录状态更改导航栏

Ember.js 根据登录状态更改导航栏,ember.js,Ember.js,我一直在尝试使用Rails/Ember pre-4做一件非常典型的事情,那就是有一个带有导航栏和内容部分的页面。导航栏仅在登录时更改(登录时显示注销按钮,注销时显示登录和注册按钮),而不是在每次页面更改时更改 起初我认为我可以在application.hbs模板中做一些事情,例如: {{查看导航栏}} {{outlet}} 在这里,我设置了navbar以响应登录状态更改(由状态管理器管理)。这似乎不起作用 然后我尝试了类似的方法(也在application.hbs中): {{outlet nav

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

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

{{查看导航栏}} {{outlet}}

在这里,我设置了navbar以响应登录状态更改(由状态管理器管理)。这似乎不起作用

然后我尝试了类似的方法(也在application.hbs中):

{{outlet navbar}} {{outlet}}

并尝试在每条路线上设置导航栏,这导致了大量重复,最终也没有起作用


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

有很多方法可以做到这一点。您描述的第一种方法与我们正在做的最接近。在过去的ember版本中,我们使用了view helper,今天我们使用了
{{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>
App.NavbarController = Ember.ArrayController.extend({
  isAuthenticated: false,
  login: function() {
    this.set('isAuthenticated', true);
  },
  logout: function() {
    this.set('isAuthenticated', false);
  }
});

在实际应用中,NavbarController会将这些请求代理给另一个控制器,可能是
currentUserController
。我在这里创建了一个工作示例:

太好了,谢谢。我用一位州经理对您的示例进行了一些扩展,并按预期工作。这是一个很好的示例。然而,我试图更进一步,在我的索引视图中有一个使用相同状态管理器的条件。我把这作为一个单独的问题问: