Ember.js Cookbook

Using yield with components

Components can be set up in block or inline form. When in block form, components can yield information. In this recipe, we'll look at an example of using yield to show information in a template.

How to do it...

1. In a new project, create a new student component:

   $ ember g component student-info
   

   This will create the student component.

2. Edit the student-info template file and add some text:

   // app/templates/components/student-info.hbs
   This is information before the yield<br>
   {{yield}}
   This is information after the yield

   The {{yield}} expression in the component will be where the text in the block will be rendered.

3. Add the new student-info component to the application template file:

   // app/templates/application.hbs <h2 id="title">Welcome ...