Exploring nested outlets

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.runtime.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.3.js"></script>
<div id="app">
    
</div>
<script type="text/x-handlebars" data-template-name="app-view">
    I am application. {{#linkTo foo}}Foo{{/linkTo}}
    {{outlet foo}}
</script>

<script type="text/x-handlebars" data-template-name="foo-view">
    <p>I am foo</p>
    {{outlet bar}}
</script>

<script type="text/x-handlebars" data-template-name="bar-view">
    <p>I am bar</p>
    {{outlet baz}}
</script>

<script type="text/x-handlebazs" data-template-name="baz-view">
    <p>I am baz</p>
</script>

JavaScript

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


App.ApplicationController = Ember.Controller.extend({

});
App.ApplicationView = Ember.View.extend({ templateName: 'app-view' });

App.FooController = Ember.Controller.extend()
App.FooView = Ember.View.extend({
    templateName: 'foo-view'
});

App.BarController = Ember.Controller.extend()
App.BarView = Ember.View.extend({
    templateName: 'bar-view'
});

App.BazController = Ember.Controller.extend()
App.BazView = Ember.View.extend({
    templateName: 'baz-view'
});



App.FooRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render({outlet: 'foo'});
        this.render('bar', {into: 'foo', outlet: 'bar', controller: this.controllerFor('bar')});
        this.render('baz', {outlet: 'baz', controller: this.controllerFor('baz')});
    }
});


App.Router.map(function() {
    this.route('foo');
});