Using components in an application

Components can be used in applications in a variety of ways. In this recipe, we'll see how to create a component and add it to a template.

How to do it...

To begin, we'll create a simple component that displays student information.

  1. In a new application, generate a new component:
    $ ember g component student-info

    All components must have a dash in their names. This will generate the student-info component. This stub will be created in the app/components and app/templates/components folders as well.

  2. Edit the student-info.js file in the app/components folder. Add a few simple properties:
    // app/components/student-info.js
import Ember from 'ember';

export default Ember.Component.extend({
    name: 'Erik',
    grade: 12,
    nickName: 'E'

});

    In this component, we added three properties, name, grade, and nickName. We'll use these later in our template.

  3. Update the component template in the app/templates/components folder:
    // app/templates/components/student-info.hbs
<br>student info:<br>
    {{name}}<br>
    {{grade}}<br>
    {{nickName}}<br>

    In this template, we are simply displaying information from the component.

  4. Finally, let's edit the application.hbs file in the app/templates folder:
    // app/templates/application.hbs
<h2 id="title">Welcome to Ember</h2>
{{student-info}}

    The component is added to the application template by adding the Handlebars expression {{student-info}} to it. This will register an inline Handlebars helper automatically and render the contents of the student-info.hbs file to the application.hbs file.

    Let's change this example and add the block form.

  5. Edit the student-info.hbs file and add yield to it:
    <br>student info:<br>
    {{name}}<br>
    {{grade}}<br>
    {{yield}}
    {{nickName}}<br>

    The {{yield}} expression will be the placeholder where the outside template will render when the component is in block form. We'll discuss this more in the Using yield with components recipe.

  6. Update the application.hbs file with the new block form component:
    // app/templates/application.hbs
<h2 id="title">Welcome to Ember</h2>
{{#student-info}}
    This will render in the yield<br>
{{/student-info}}

    The component has a hash (#) in front of the name. This is a signal to the Handlebars templating engine that the component will be in block form. The yield helper in the student-info.hbs file will display the contents in the block.

  7. Run ember server and you'll see this output:
    How to do it...

    The students component is displayed here in the application template in block form.

    Tip

    All components are div tags. In other words, the component template that is created by default will be rendered in a div tag. This can be changed using the tagName property. You simply need to add this property to the component JavaScript file in the components directory.

Creating a student component dynamically

If needed, you can defer the selection of the component until runtime. Let's take a look at an example of doing this with the student component that we created in the earlier section.

  1. In a new project, create a new student-info component:
    $ ember g component student-info

    This will generate the necessary files for the student-info component.

  2. Edit the component file and add this information:
    // app/components/student-info.js
import Ember from 'ember';

export default Ember.Component.extend({
    name: 'Erik',
    grade: 12,
    nickName: 'E',

});

    This component has a few simple properties.

  3. Update the component template with this information:
    // app/templates/components/student-info.hbs
<br>student info:<br>
    {{name}}<br>
    {{grade}}<br>
    {{yield}}
    {{nickName}}<br>
    {{moreInfo}}<br>

    Just as before, we are showing some simple properties that are retrieved from the component context.

  4. Create a new application route in the app/routes folder. Add a new model method called comp:
    // app/routes/application.js
import Ember from 'ember';

export default Ember.Route.extend({
    model() {
      return ['student-info'];

    }
});

    This model sends back a string array. This array will be used in our template as the name of the component that we want to display dynamically.

  5. Update the application.hbs file in the app/templates folder. Add a new each helper that will display the new dynamic component:
    <h2 id="title">Welcome to Ember</h2>
{{#each model as |comp|}}
    {{component comp}}
{{/each}}

    To display a dynamic component, you must use the {{component}} helper. The first argument of the helper is the name of the component that you want to use. In this case, {{comp}} is rendered to student-info. Note that we can use the component helper inline or in block form. If the component is rendered inline, yield is not used.

  6. After running ember server, the template will render with the dynamic component:
    Creating a student component dynamically

How it works...

Components are used to encapsulate data into a form that can be easily reused throughout an application. Each component can be in block or inline form and is rendered as a div tag by default. Components have a template and JavaScript file.

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

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