ember-js-globally-available-controllers-like-currentuser

For SO POST http://stackoverflow.com/questions/14388249/ember-js-globally-available-controllers-like-currentuser

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.3.js"></script>
<script src="https://gist.github.com/raw/75478d4d97cbc533a12f/9f8126fd97cbaa065046aa368afbcac4f42c8afc/ember-data-b411dc5a.js"></script>
<html>
<body>
<header>
  <pre>ember pre4 controllers not keeping state</pre>
</header>
<hr/>
  
<div id="app-target">
  
</div>
<script type="text/x-handlebars" data-template-name="application-view">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index-view">
    Welcome to index, go to users: {{#linkTo "users.index"}}Users{{/linkTo}}
</script>
<script type="text/x-handlebars" data-template-name="users-view">
    <h2>Users</h2>
    {{#each users}}
        {{this}}<br/>
    {{/each}}
</script>
 
<hr/>
<footer>

</footer>

JavaScript

window.App = Ember.Application.create({
    rootElement: '#app-target'   
});

App.ApplicationController = Ember.Controller.extend({	
  needs: ['users'],
});
App.ApplicationView = Ember.View.extend({
    templateName: 'application-view'
});

App.IndexController = Ember.Controller.extend({
    needs: ['users'],
    users: (function(){
        return this.controllerFor('users').get('content');
    }).property('controllers.users.content','controllers.users.content.@each')
});
App.IndexView = Ember.View.extend({
    templateName: 'index-view'
});


App.UsersController = Ember.ArrayController.extend({
  content: ['mike', 'jen', 'sofia'],
    _content_observer: (function(){
         console.log('Content was altered! But why? And by whom?');
    }).observes('content'),
    init: function() {
        var _self = this;
        setTimeout(function(){
            _self.content.pushObject('hank');
        }, 2000);
    }
});
App.UsersIndexController = Ember.Controller.extend({
    needs:['users'],
    users: (function(){
        this.controllerFor('users').get('content');
    }).property('controllers.users.content','controllers.users.content.@each')
});
App.UsersIndexView = Ember.View.extend({
    templateName: 'users-view'
});

App.UsersRoute = Ember.Route.extend({
    setupController: (function(){
        /* An attempt to prevent some default behavior from overwriting the content
           property
        */
        console.log("Setup users");
    })
});

App.Router.map(function(){
    this.route('index');
    this.resource('users', {path: '/users'}, function(){});
});