Following around a number of tutorials/blog posts/stack questions similar in nature to this: http://say26.com/using-rails-devise-with-ember-js and this: How and when to use Ember.Application register and inject methods? I'm trying to create a globally available variable currentUser
.
The behaviour is not well understood to me, within a view which is created by the app the currentUser variable is accessible, but if I include a view within another view, it's not accessible.
{{currentUser.fullName}}
is accessible in the index template and the about template, but not header template. What am I missing? what's the difference? how to fix it?
Fiddle example: http://jsfiddle.net/NWLQ9/3/
My templates are:
<script type="text/x-handlebars">
<h1>Ember Sandbox</h1>
<nav>
{{#linkTo "index"}}Home{{/linkTo}}
{{#linkTo "about"}}About{{/linkTo}}
</nav>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="header">
Header Template
<hr/>
Last Name: {{currentUser.lastName}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>currentUser.fullName: <code>{{currentUser.fullName}}</code></p>
<p>view App.HeaderView: <code>{{view App.HeaderView}}</code></p>
</script>
<script type="text/x-handlebars" data-template-name="about">
<h2>About</h2>
<p>A little live editor for Ember, written in Ember.</p>
Full name: {{currentUser.fullName}}
</script>
And my JS code:
App = Ember.Application.create({
title: 'BQJedi',
LOG_TRANSITIONS: true,
rootURL: '/',
ready: function(){
var cu = App.CurrentUserController.create({
firstName: 'My First',
lastName: 'My Last',
userToken: '9001'
});
this.register('user:current', cu, {singleton: true, instantiate: false});
this.inject('controller', 'currentUser', 'user:current');
}
});
App.Router.map(function() {
this.route('about');
});
App.CurrentUserController = Ember.ObjectController.extend({
fistName: 'Ninja',
lastName: '',
userToken: null,
fullName: function () {
return this.firstName + ' ' + this.lastName;
}.property('firstName', 'lastName'),
isLoggedIn: Ember.computed.notEmpty('userToken')
});
App.HeaderController = Ember.Controller.extend({
})
App.HeaderView = Ember.View.extend({
templateName: 'header',
controller: App.HeaderController
});