Old Guides - You are viewing the guides for Ember v1.13.0. VIEW v3.12.0
Edit Page

Rendering with Helpers


Ember.js provides several helpers that allow you to render templates in different ways.

The {{partial}} Helper

{{partial}} takes the template to be rendered as an argument, and renders that template in place.

{{partial}} does not change context or scope. It simply drops the given template into place with the current scope.

Written by {{author.firstName}} {{author.lastName}}
<h1>{{title}}</h1>
<div>{{body}}</div>
{{partial "author"}}

Output:

<div>
  <h1>Why You Should Use Ember.js</h1>
  <div>Because it's awesome!</div>
  Written by Yehuda Katz
</div>

The {{render}} Helper

{{render}} takes two parameters:

  • The first parameter describes the context to be setup
  • The optional second parameter is a model, which will be passed to the controller if provided

{{render}} does several things:

  • When no model is provided it gets the singleton instance of the corresponding controller
  • When a model is provided it gets a unique instance of the corresponding controller
  • Renders the named template using this controller
  • Sets the model of the corresponding controller

Modifying the post / author example slightly:

Written by {{firstName}} {{lastName}}.
Total Posts: {{postCount}}
<h1>{{title}}</h1>
<div>{{body}}</div>
{{render "author" author}}
export default Ember.Controller.extend({
  postCount: Ember.computed('model.posts.[]', function() {
    return this.get('model.posts.length');
  })
})

In this example, render will:

  • Use the corresponding template (in this case the default of "author")
  • Get (or generate) the singleton instance of AuthorController
  • Set the AuthorController's model to the 2nd argument passed to render, here the author field on the post
  • Render the template in place, with the context created in the previous steps.

{{render}} does not require the presence of a matching route.

{{render}} is similar to {{outlet}}. Both tell Ember.js to devote this portion of the page to something.

{{outlet}}: The router determines the route and sets up the appropriate controllers/views/models. {{render}}: You specify (directly and indirectly) the appropriate controllers/views/models.

Note: {{render}} cannot be called multiple times for the same route when not specifying a model.

Comparison Table

General

Helper Template Model Controller
{{partial}} Specified Template Current Model Current Controller
{{render}} Template Specified Model Specified Controller

Specific

Helper Template Model Controller
{{partial "author"}} templates/author.hbs models/post.js controllers/post.js
{{render "author" author}} templates/author.hbs models/author.js controllers/author.js