Computed property doesn't work in a service

1

Hi all! I’m using EmberJS 1.13. I want to show username (on application.hbs) when an user is logged in.

templats/application.hbs

<div id="main-frame" class="container-fluid">
  <div id="page-header">
    <img src="/assets/logo-main.png">
    {{#if isLoggedIn}}
      <span>{{currentUser.displayName}}</span>
    {{else}}
      <a id="loginButton" class="text-button" data-toggle="modal" data-target="#loginWindow">Войти</a>
    {{/if}}
  </div>
  <div id="content-frame" class="container">
    <ul class="nav nav-pills">
      <li>{{#link-to 'builder'}}Конструктор{{/link-to}}</li>
      <li><a href="#">Мой бар</a></li>
      <li><a href="#">Админ-панель</a></li>
    </ul>
    <hr>
    <hr>
    {{outlet}}
  </div>
</div>
{{login-window authSuccess="authSuccess"}}
{{signup-window}}

routes/application.js

import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';

export default Ember.Route.extend(ApplicationRouteMixin, {
	currentUser: Ember.inject.service('current-user'),
	isLoggedIn: Ember.computed.bool('currentUser.isAuthenticated'),

	actions: {

	    authSuccess: function(userInfo) {
	    	this.get('currentUser').setUser(userInfo);
	    }
	}
});

services/current-user.js

import Ember from 'ember';

export default Ember.Service.extend({
	session: Ember.inject.service("session"),

	username: "",
	password: "",
	displayName: "",
	accessLevel: -1,
	isLoggedIn: false,

	isAuthenticated: function () {
		return this.get("isLoggedIn") && this.get('session').isAuthenticated;
	}.property('isLoggedIn'),

	setUser: function(userInfo) {
		this.set("username", userInfo.username);
		this.set("password", userInfo.password);
		this.set("displayName", userInfo.displayName);
		this.set("accessLevel", userInfo.accessLevel);
		this.set("isLoggedIn", true);
	}
});

I have next behavior: currentUser.setUser() called, currentUser.isLoggedIn setted, but currentUser.isAuthenticated doesn’t recalculates and no username in html. What I do wrong?

I also tried different ways implement isLoggedIn property:

isAuthenticatedObserver: Ember.on('init', Ember.observer('isLoggedIn', function () {
    this.set('isAuthenticated', this.get("isLoggedIn") && this.get('session').isAuthenticated);
}))

////

isLoggedIn: function() {
	return this.get('currentUser').isAuthenticated;
}.observes('currentUser.isAuthenticated')

////

isLoggedIn: function() {
	return this.get('currentUser').isAuthenticated;
}.property('currentUser.isAuthenticated')

But nothing changed.

2

Your application.hbs template is backed up by application controller, so you should provide isLoggedIn and currentUser property to application controller.

3

So properties from “route” just ignored in template?

4

As far as I know: yes. (:

5

isAuthenticated is not watching all the properties that it depends on. You need to update it .property('isLoggedIn', 'session.isAuthenticated')

6

Thanks. I also tried this, but It didn’t help. I will create a contoller and move isLoggedIn property to it as soon as I can. =)

7

Yeah! I added it to controller and problem gone! Thanks all for help.

8

I’m glad it worked. (: