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 from routes to components, and from components to components
- Fork and clone this repository.
- Install dependencies with
npm install
andbower install
.
From Communication Between Distant Components - Ember Igniter
Let's wireframe the Listr client application interface with a focus on identifying different logical interface elements. We'll call these visual elements "components".
We'll need to generate the application index route and create some list data.
ember generate route index
//index/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 that.
<!-- index/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>
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.
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
.
Toggle display of list on header click.
Let's explore Ember's classNameBindings
and see if that can help us achieve this toggle.
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.
- 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
Source code distributed under the MIT license. Text and other assets copyright General Assembly, Inc., all rights reserved.