4.6 Routing -- Rendering A Tempalte

1. route handler一個重要的任務就是渲染合適的模板到屏幕。

2. 默認的，一個route handler將會呈現模板到最近的父模板。

app/router.js

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

app/routes/post.js

export default Ember.Route.extend();

3. 若是你想呈現一個和route handler相關模板以外的模板，實現renderTemplate hook：

app/routes/post.js

export default Ember.Route.extend({
  renderTemplate() {
    this.render('favoritePost');
  }
});

4. 若是你想使用route handler的controller以外不一樣的controller，傳遞這個controller的名字到controller選項：

app/routes/post.js

export default Ember.Route.extend({
  renderTemplate() {
    this.render({ controller: 'favoritePost' });
  }
});

5. Ember容許你命名你的outlets。下面的例子使用了明確的名字指定了兩個outelets：

<div class="toolbar">{{outlet "toolbar"}}</div>
<div class="sidebar">{{outlet "sidebar"}}</div>

因此若是你想要呈現你的posts到sidebar outlet，使用這樣的代碼：

app/routes/post.js

export default Ember.Route.extend({
  renderTemplate() {
    this.render({ outlet: 'sidebar' });
  }
});

6. 上面描述的全部選項能夠被一塊兒使用，你想要什麼組合均可以：

app/routes/post.js

export default Ember.Route.extend({
  renderTemplate() {
    var controller = this.controllerFor('favoritePost');

    // Render the `favoritePost` template into
    // the outlet `post`, and use the `favoritePost`
    // controller.
    this.render('favoritePost', {
      outlet: 'post',
      controller: controller
    });
  }
});

7. 若是你想要渲染兩個不一樣的模板到一個路由的兩個不一樣的被加載的模板的outlets中：

app/routes/post.js

export default Ember.Route.extend({
  renderTemplate() {
    this.render('favoritePost', {   // the template to render
      into: 'posts',                // the template to render into
      outlet: 'post',              // the name of the outlet in that template
      controller: 'blogPost'        // the controller to use for the template
    });
    this.render('comments', {
      into: 'favoritePost',
      outlet: 'comment',
      controller: 'blogPost'
    });
  }
});