Lessons
- Add behavior to a component with class
- Access an instance state from template
- Manage state with tracked properties
- Use conditionals syntax in template
- Respond to a user interaction with
action
- Invoke element modifiers
- 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