Route#render()

render is used to render a template into a region of another template (indicated by an {{outlet}}). render is used both during the entry phase of routing (via the renderTemplate hook) and later in response to user interaction.

For example, given the following minimal router and templates:

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

<!-- application.hbs -->
<div class='something-in-the-app-hbs'>
  {{outlet "anOutletName"}}
</div>

<!-- photos.hbs -->
<h1>Photos</h1>

You can render photos.hbs into the "anOutletName" outlet of application.hbs by calling render:

// posts route
Ember.Route.extend({
  renderTemplate: function() {
    this.render('photos', {
      into: 'application',
      outlet: 'anOutletName'
    })
  }
});

render additionally allows you to supply which controller and model objects should be loaded and associated with the rendered template.

// posts route
Ember.Route.extend({
  renderTemplate: function(controller, model){
    this.render('posts', {    // the template to render, referenced by name
      into: 'application',    // the template to render into, referenced by name
      outlet: 'anOutletName', // the outlet inside `options.template` to render into.
      controller: 'someControllerName', // the controller to use for this template, referenced by name
      model: model            // the model to set on `options.controller`.
    })
  }
});

The string values provided for the template name, and controller will eventually pass through to the resolver for lookup. See Ember.Resolver for how these are mapped to JavaScript objects in your application. The template to render into needs to be related to either the current route or one of its ancestors.

Not all options need to be passed to render. Default values will be used based on the name of the route specified in the router or the Route's controllerName and templateName properties.

For example:

// router
Router.map(function() {
  this.route('index');
  this.route('post', { path: '/posts/:post_id' });
});

// post route
PostRoute = App.Route.extend({
  renderTemplate: function() {
    this.render(); // all defaults apply
  }
});

The name of the PostRoute, defined by the router, is post.

The following equivalent default options will be applied when the Route calls render:

//
this.render('post', {  // the template name associated with 'post' Route
  into: 'application', // the parent route to 'post' Route
  outlet: 'main',      // {{outlet}} and {{outlet 'main'}} are synonymous,
  controller: 'post',  // the controller associated with the 'post' Route
})

By default the controller's model will be the route's model, so it does not need to be passed unless you wish to change which model is being used.