Ember: Error with named outlets

Question

I do not know why my templates are not being rendered in the named outlets. This is my first stab at learning ember and I am stuck on the named outlets.

I would like to render the sidebarTemplate in the {{outlet "sidebar"}} and the contentTemplate in the {{outlet "content"}} but I keep getting the following error in the console: "Error while processing route: posts Cannot read property 'connectOutlet' of undefined TypeError: Cannot read property 'connectOutlet' of undefined"

Here is a fiddle to my code: http://jsfiddle.net/va71wwr9/

Here is my HTML:

<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>

Here is my 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.render('sidebarTemplate', {
        into: 'posts',
        outlet: 'sidebar'
    });
    this.render('contentTemplate', {
        into: 'posts',
        outlet: 'content'
    });
  }
});

Answer 1

The problem is that you're not rendering the posts template. You can fix this by adding this.render() or this._super() before you define the templates of the outlets of the route you are in get rendered:

App.PostsRoute = Ember.Route.extend({
    renderTemplate: function() {

        // add this line
        this._super();

        this.render('sidebarTemplate', {
            into: 'posts',
            outlet: 'sidebar'
        });
        this.render('contentTemplate', {
            into: 'posts',
            outlet: 'content'
        });
    }
});

Just one note on extending features; In this particular code, the call this._super() would technically be the same as calling this.render() , but the difference is that by calling _super() you are extending the renderTemplate functionality by appending your stuff to what the method would do on its own, which in this case would be call this.render() and perhaps another routine this method might need to perform (generally speaking, not exclusive to renderTemplate ), while if you call the method that does the thing you want yourself, in this case the render method, you'll be excluding from the flow the other things that this method could perform. And this is not right or wrong. It really depends on what you want to achieve. For most cases you should call this._super() instead of re-writing the implementation again in the event that the method you're extending does more than one thing and/or gets to do more than one thing in the future.