No description, website, or topics provided.
Clone or download
Pull request Compare This branch is 30 commits behind ga-wdi-boston:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

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.



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 down from routes to components, and from components to components.


  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 Listr Index Route

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

ember generate route index
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.

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

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

ember generate route lists
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.

<!-- templates/lists.hbs -->
<div class="container">

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

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.

What are some of the advantages of converting our list markup into a component? Besides the fact that it is less semantic to have an each block inside of an each block, our code becomes much DRY-er if we ever want to reuse this format in other parts of our application.

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.

After doing this, we can simply reference this component inside our lists.hbs file. However, there is one more thing we need to do in order for the reference to our component to work: We need to tell the component that we are rendering what we are passing down as a 'list'. In order to avoid confusion, I am going to rename 'list' in my each block to 'listOfItems'. I can then pass down 'listOfItems' as 'list' inside my component.

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.

You may have noticed that when you generate a component in Ember, you get a file in a components folder in addition to the file we've been working with inside templates/components. It is in this first file that we can add classNameBindings to our component.

After adding our classNameBindings and our actions, we will need to add our CSS to the class we created and attach our action to the appropriate handlebars element.

After we have successfully added our styles in app/styles/listr.scss, let's make sure not to forget to import this file in app/styles/app.scss.

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


  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