EmberJS: Render default template

Question

I am trying to build an Ember Application which I want to render a default template of the nested route into the index route. Here is the router.js

export default Router.map(function() {
  this.route('posts', function() {
    this.route('featured');
    this.route('authors');
    this.route('popular');
  });
});

Here is the posts-index.hbs template:

<div class="posts">
  <h2>Welcome to your blog posts</h2>
  <p>Here are your posts:</p>
  <ul>
    <li>{{#link-to 'posts.featured'}}Featured{{/link-to}}</li>
    <li>{{#link-to 'posts.authors'}}Authors{{/link-to}}</li>
    <li>{{#link-to 'posts.popular'}}Popular{{/link-to}}</li>
  </ul>
  <div class="posts-container">
    {{outlet}}
  </div>
</div>

Here is the posts-index/featured.hbs template:

<div class="featured-posts">
  <h3>List of featured posts</h3>
  <p>...</p>
</div>

Other templates are the same as the featured template.

As you can see in the application above, I want when user visits the /posts, they will see the posts-index template, as well as the posts/featured.hbs template being rendered as default. Of course, user can still navigate to url /posts/featured, and seeing the same content.

Any suggestions to this are appreciated. Thanks!

Answer 1

Ember Route provides a renderTemplate hook which you can use like this:

App.PostsIndexRoute = Em.Route.extend({

  renderTemplate: function() {
    // renders the template for the current route, as per conventions
    // in your case it will be 'posts/index' 
    this.render();

    // renders the named template 'posts/feature' *into* another named template
    this.render('posts/featured', {
      into: 'posts/index' // which in this case is 'posts/index'
    }); 
  }
});

(see JSBin)