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 to Ember</h2>

{{#student-info}}
    Information in block<br>
{{/student-info}}

    When in block form, designated by the hash #, the information in the block will show up in {{yield}}.

  4. After running ember server, the following screen will be displayed:
    How to do it...

    As you can see, the component yield template displayed the information in the block.

How it works...

The {{yield}} Handlebars expression works by taking the information in the component block and rendering it. The block form is designated by the hash, #. Inline components do not have the hash and do not yield information.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset