Ember named outlet

Ember named outlet

by Nirvanachain

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script type="text/x-handlebars">
    <div class="nav-container">
        <ul class="nav">
            <li>{{#link-to 'home'}}Home{{/link-to}}</li>
            <li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
        </ul>
    </div>
    
    {{outlet}}
</script>

<script type="text/x-handlebars" id="home">
    <h1>Home screen</h1>
</script>

<script type="text/x-handlebars" id="posts">
    <h1>Posts screen</h1>
    <div class="sidebar-container">
        {{outlet sidebar}}
    </div>
    <div class="content-container">
        {{outlet content}}
    </div>
</script>

<script type="text/x-handlebars" id="sidebarTemplate">
    <p>Side bar stuff</p>
</script>

<script type="text/x-handlebars" id="contentTemplate">
    <p>content stuff</p>
</script>

CSS

.nav-container {
    border-bottom: 1px solid #999
}
.nav > li {
    display: inline-block;
}

JavaScript

var App = Ember.Application.create();

App.Router.map(function() {
  this.resource('home', {path: '/'});
  this.resource('home', {path: 'home'});
  this.resource('posts', {path: 'posts'});
});

App.PostsRoute = Ember.Route.extend({
    renderTemplate: function() {
    
        this._super();
        
        this.render('sidebarTemplate', {
            into: 'posts',
            outlet: 'sidebar'
        });
        this.render('contentTemplate', {
            into: 'posts',
            outlet: 'content'
        });
    }
});