shireen-bean/ember-components

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 a List 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!

Lab: Create a List Item Component

Name it listr-list/item.

Code-Along: Toggle Display of a List

Toggle display of list on header click.

Lab: Toggle Strike-Through of a List Item

Toggle strike-through of list item on item click.

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

Source code distributed under the MIT license. Text and other assets copyright General Assembly, Inc., all rights reserved.