/ember-components

Primary LanguageJavaScriptOtherNOASSERTION

General Assembly Logo

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

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

component hierarchy

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".

listr demo

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

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