Ember.js: Tutorial — Part 1: Interactive Components

Lessons

1. Add behavior to a component with class
2. Access an instance state from template
3. Manage state with tracked properties
4. Use conditionals syntax in template
5. Respond to a user interaction with action
6. Invoke element modifiers
7. Test user interaction

1. Add behavior to a component with class

1.1. Generate image namespaced component class

NOTE

• A component class optionally associate behaviors with JavaScript
• A component class file is also generated when generating with -gc

1.2. Edit image namespaced component class

NOTE

constructor allows to set component's default state.

2,4. Access an instance state from template

IMPORTANT

This section include lessons for:

• 4. Use conditionals syntax in template

2,4.1. Edit image namespaced component

NOTE

• A template has access to a component's instance variables
• {{#if}}…{{else}}…{{/if}} are conditionals syntax
  • It renders a different content based on condition met

2,4.2. Edit image namespaced component class

NOTE

Directly specifying a property has similar effect as contructor pattern.

3. Manage state with tracked properties

3.1. Edit image namespaced component class

NOTE

• @tracked and @action are examples of decorators
  • JavaScript decorators starts with @ symbol
  • @tracked monitors variable and re-renders template when value changes
  • @action indicates method will be used on template as an event handler

5-6. Respond to a user interaction with actions

IMPORTANT

This section include lessons for:

• 6. Invoke element modifiers

5-6.1. Edit image namespaced component

NOTE

on modifier attaches a method as an event handler.

5-6.2. Edit image namespaced component

NOTE

• The expression version of {{if}} takes two arguments
  • First argument is a condition
  • Second argument is an expression
  • Expression is evaluated if condition evaluates to true

5-6.3. Edit image namespaced component

NOTE

• {{if}} can optionally take a third argument
  • Third argument is also an expression like second argument
  • However, expression is evaluated if condition evaluates to false

7. Test user interaction

7.1. Edit image namespaced component test

7.2. Run image namespaced component test

References

• Interactive Components