Geek asks and answers

Navbar change based on login status

I tried using Rails / Ember pre-4 to do a pretty typical thing that has a page with a navigation bar and a content section. Navbar changes only when you log in (the button for logging out when logging in and logging in and registering for logging out is displayed), and not on each page.

At first I thought I could do something in the application.hbs template, for example:

{{view navbar}} {{}} On exit

where I set navbar to respond to input state changes (managed by the state manager). This does not seem to work.

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

{{outlet navbar}} {{}} At the exit

and tried to configure navbar in each route, which leads to a lot of duplication, and also ultimately does not work.

Before sending the code, you need to know if someone already has a good solution to this common situation, when some parts of your page, such as the navigation bar or sidebar, change only with some changes in the state of the application, and not on each page .

+1
source share
1 answer

There are many ways to do this. The first approach that you described is closest to what we are doing. In previous versions of ember we used a view helper for this, today we use {{render}}, but this is one and the same basic concept. For example, application.hbs might look like this:

{{render navbar}} {{outlet}}

Navbar.hbs can now use a simple helper {{#if}}to exchange links based on login status.

<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

+2

More articles:


All Articles