EmberJS setting a globally accessible variable/object using Injection not working as advertised

Question

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

Answer 1

You can't set controller: App.HeaderController, that won't do anything (partially because it isn't going to call create on that, partially because you'd be creating it outside of di).

If you use render {{render 'header'}} it will render the header template and build up a controller through di, and inject your currentUser. You can totally delete the view and the controller elements, since you weren't defining anything out of the defaults (or you can leave them in, no harm)

http://jsfiddle.net/NWLQ9/7/