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 · Accepted Answer · 2013-07-07T04:29:13.657

1

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}}

edited Jul 07 '13 at 04:29

answered Jul 06 '13 at 22:18

James

4,599
2
19
27

I got it working, but only halfway. I ended up using a {{partial}} template helper so now the header content changes when the 'isAuthenticated' value changes. As here (in coffeescript): `App.LoginController = Ember.ObjectController.extend needs: "session" ... clickLogin: (e) -> ... @set("model.IsAuthenticated", true) @set("controllers.session.isAuthenticated", true) ` Thanks again for your help. -Bryan – bk11425 Jul 10 '13 at 20:54
One further question, though. Is there a way for the controller to observe a ember-data model object for changes? I tried this, but to no avail: `App.SessionController = Em.Controller.extend username: null usernameBinding: 'App.Me.Username' isAuthenticated: null isAuthenticatedBinding: 'App.Me.IsAuthenticated' ` – bk11425 Jul 10 '13 at 20:56
I think what you're trying to do is something like `App.SessionsController` ... `needs: "me"` ... `usernameBinding: "controllers.me.username"`... and so on. You only want `App.MeController` to represent the `Me` model. To "observe" `Me` with `SessionController` that's where the `needs` property came in just like how we used it to observe the transient attributes of `SessionController` in `ApplicationController`. – James Jul 11 '13 at 11:31
Cool! Thanks for the tip. I'll give that a try. Is it possible to supply an array for "needs", such as `needs: ["me", "session"]` (e.g. in another controller) – bk11425 Jul 11 '13 at 19:52
In short, yes. [This answer](http://stackoverflow.com/a/14388792/2081133) shows a good example. – James Jul 11 '13 at 20:07

Ember Navbar needs to show model data upon change

1 Answers1