Ember.js Layout

Question

I am just getting warm with ember.js and would like to create a single page application with it. Due to the nature of the application, I will have multiple "major" layouts at some point.

After the user logged into the application, I need to display the user name based on an ajax call. I did not yet understand how I best implement this in ember.js, because this (at least to me) is outside of any view hierarchy.

I played around with using the "into" option of the render method.

App.TestRoute = Ember.Route.extend({
  renderTemplate: function(controller, model) {
    this.render('layout');

    this.render('test',{
       into: 'layout'
    });
  },
});

I thought this would also call the layout route and load its model. Unfortunately it did not do that.

I went over to define a layout with a {{yield}} directive

<div>
  <div class="container" id="header">
    {{loginUser.userName}}
  </div>

  <div class="container" id="main-content">
    {{yield}}
  </div>

  <div class="container" id="footer">
    Just some static footer
   </div>
</div>

and my view like

App.TestView = Ember.View.extend({
  layoutName: 'layout'
});

The rendering works fine, but I fail to see where I can best inject the user data. Ideally this should be transparent for all views that make use of this layout. So my thought was to work with inheritance, but did not come to a working solution yet.

Am I completely off track here or does this somehow make sense?

UPDATE

I put the example in here: http://jsfiddle.net/Efz8N/4/

Answer 1

Layout's are backed by the controller which is backing the view using the layout.

http://jsfiddle.net/WHvCZ/

loginUserFullName:function(){
    return this.get('controllers.application.loginUser') || 'not in';
}.property('controllers.application.loginUser')

Answer 2

Here is how I did it now. I created a mixin that I can use in any Controller that makes use of the layout. This way I at least do not have to implement this multiple times:

App.LayoutHandler = Ember.Mixin.create({
  loginUserFullName: function() {
    var name = App.get("loginUser")?App.get("loginUser"):"";

    return name;
  }.property("App.loginUser"),
});

App.IndexController = Ember.Controller.extend(App.LayoutHandler, {

});

Here an example: http://jsfiddle.net/Efz8N/6/