home
  • Blog
5.11
  • Introduction
  • Getting Started
  • Tutorial
  • Core Concepts
  • Components
  • Routing
    • Introduction
    • Defining Your Routes
    • Linking Between Routes
    • Specifying a Route's Model
    • Rendering a Template
    • Redirecting
    • Preventing and Retrying Transitions
    • Loading / Error Substates
    • Query Parameters
    • Asynchronous Routing
    • Controllers
  • Services
  • EmberData
  • In-Depth Topics
  • Application Development
  • Application Concerns
  • Accessibility
  • Configuration
  • Testing
  • Addons and Dependencies
  • Using TypeScript
  • Developer Tools
  • Ember Inspector
  • Code Editors
  • Additional Resources
  • Upgrading
  • Contributing to Ember.js
  • Glossary
Old Guides - You are viewing the guides for Ember v5.11.0.
Go to v6.3.0

Rendering a Template


One job of a route handler is rendering the appropriate template to the screen.

By default, a route handler will render the template with the same name as the route. Take this router:

app/router.js
Router.map(function() {
  this.route('posts', function() {
    this.route('new');
  });
});

Here, the posts route will render the posts.hbs template, and the posts.new route will render posts/new.hbs.

Each template will be rendered into the {{outlet}} of its parent route's template. For example, the posts.new route will render its template into the posts.hbs's {{outlet}}, and the posts route will render its template into the application.hbs's {{outlet}}.

left arrow
Specifying a Route's Model
Redirecting
right arrow
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2025 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue Created with Sketch.