Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Ember template rendering


May 09, 2021 Ember.js Reference documents



Another important responsibility of routing is to render templates with the same name.

For example, the following routing posts route posts.hbs new rendering posts/new.hbs

  1. Router.map(function() {
  2. this.route('posts', function() {
  3. this.route('new');
  4. });
  5. });

Each template is rendered on the parent {{outlet}} F or example, the above posts.hbs is rendered on application.hbs {{outlet}} application.hbs the parent template for all custom templates. The template posts/new.hbs is rendered on posts.hbs {{outlet}}

It is also allowed if you want to render to another template, but override renderTemplate in the route.

  1. // app/routes/posts.js
  2. import Ember from 'ember';
  3. export default Ember.Route.extend({
  4. // 渲染到favorites模板上
  5. renderTemplate: function() {
  6. this.render('favorites');
  7. }
  8. });

The rendering of the template is relatively simple, the content is also very small, in the previous Ember.js Getting Started Guide fourteer times outside, routing, template execution, rendering order has been introduced related to the content.


The full code of the blog post is placed in Github (the blog post has been modified several times, and the code on the blog post may be different from the github code, but the impact is small!). I f you think the blog post is a bit useful to you, please give me a star on the star project. Yours is definitely the biggest motivation for me!!