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

Show Comments