Ember Navbar needs to show model data upon change

Question

I am working on an application that needs to modify the content of the navbar after login. Here's a basic sketch I put together (with some help from other samples online): http://jsbin.com/umutag/1/ with this underlying code: http://jsbin.com/umutag/1/edit

How do I get the header view to display model data?

Should I be using a different helper for the template? (e.g. a {{view}}, {{render}}, or {{control}})

BTW, I've scoured this site and others, but most entries are a few months old and I see ember has been changing a lot since then (or I'm missing something obvious). The above example uses Ember 1.0.0 RC6.

Bryan

James James · Accepted Answer · 2013-07-06T22:18:07

You ultimately want to bind the value in the controller (probably ApplicationController) that keeps track of whether the user is logged in or not. Since this is pertaining to login, you most likely have something like a SessionController that keeps track of the token. Here's one way to go about it:

App.SessionController = Em.Controller.extend({
  token: null,
  username: null,

  isLoggedIn: function() {
    return !!this.get("token");
  }.property("token");

  // ...
});

App.ApplicationController = Em.Controller.extend({
  needs: "session",
  isLoggedInBinding: "controllers.session.isLoggedIn",
  usernameBinding: "controllers.session.username"

  //...
});

And in your navbar in the template:

  {{#if isLoggedIn}}
    <li>Logged in as {{username}}</li>
    <li>{{#linkTo "index"}}Home{{/linkTo}}</li>
    <li>{{#linkTo "secret"}}Secret{{/linkTo}}</li>
  {{else}}
    <li>{{#linkTo "login"}}Log in{{/linkTo}}</li>
  {{/if}}

Ember Navbar needs to show model data upon change

1 Answers