Ember Components

Components are used to encapsulate (repetitious) markup and tie it to behavior. Instead of separating our concerns along technological lines (HTML, CSS, JS), components tie all three of these technologies together under a reified visual element in the user interface.

Prerequisites

• ga-wdi-boston/ember-object
• ga-wdi-boston/ember-routing-dynamic

Objectives

By the end of this, developers should be able to:

• Model the user interface using components
• Represent visual hierarchies with nested components
• Register actions and click handlers on component objects
• Pass data from routes to components, and from components to components

Preparation

1. Fork and clone this repository.
2. Install dependencies with npm install and bower install.

Components Represent a Visual Element

From Communication Between Distant Components - Ember Igniter

Follow-Along: Wireframe the Listr Interface

Let's wireframe the Listr client application interface with a focus on identifying different logical interface elements. We'll call these visual elements "components".

Code-Along: Create Listr Index Route

We'll need to generate the application index route and template as a landing page.

ember generate route index

//index/route.js
import Ember from 'ember';

 export default Ember.Route.extend({

 });

NOTE: there is no model hook for the index route because we currently don't need to pull in any data on initial page load.

<!-- lists/template.hbs -->
<div class="container">
  <h2>Welcome to listr!</h2>
  {{#link-to 'lists'}}Check out the lists{{/link-to}}
</div>

Next, we'll need to generate the application lists route and create some list data.

ember generate route lists

//lists/route.js
import Ember from 'ember';

 export default Ember.Route.extend({
   model () {
     return [
       {
         title: 'Favorites',
         items: [
           { content: 'Mountains' },
           { content: 'Coffee' },
           { content: 'Live music' },
           { content: 'The spooky ghost emoji' },
         ],
       }, {
         title: 'Todos',
         items: [
           { content: 'Practice Ember' },
           { content: 'Move cross-country' },
           { content: 'Get oil change' },
           { content: 'Buy catnip' },
         ],
       },
     ];
   },
 });

Now let's figure out how to render this new route.

<!-- lists/template.hbs -->
<div class="container">
  <h2>ListR</h2>

  {{#each model as |list|}}
    <div>
      <h3>Title: {{list.title}}</h3>
      <ul>
        {{#each list.items as |item|}}
          <li>{{item.content}}</li>
        {{/each}}
      </ul>
    </div>
  {{/each}}
</div>

Code-Along: Create a List Component

Since the list is a visual component of our UI, we should actually pluck that out into an Ember component.

Let's name it listr-list to follow best practices. We wouldn't want to clash with any new HTML elements in future specs!

ember generate component listr-list

Now, we can move our previous markup to the listr-list's template.js.

Lab: Create a List Item Component

Just like the list itself, each list item is an individual visual component of our UI. Create a list item component and name it listr-list/item.

Code-Along: Toggle Display of a List

Toggle display of list on header click.

Let's explore Ember's classNameBindings and see if that can help us achieve this toggle.

Lab: Toggle Strike-Through of a List Item

Create an action of toggleProperty that toggles a classNameBindings of listItemCompleted. This class should have a CSS style declaration that strikes through completed list items.

Additional Resources

• Ember Component Guide
• Ember Component API Documentation
• Ember Actions
• Ember Action Handler
• Parent to Children Component Communication for UI State - Ember Igniter
• Communication Between Distant Components - Ember Igniter
• Ember Best Practices: Actions Down, Data Up... wait what?
• How Ember Data affects data down, actions up

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].