Lessons
- Manage application-level configuration
- Parameterize a component with arguments
- Access component arguments
- Interpolate values in a template
- Override HTML attributes with
...attributes
- Refactor with getters and auto-track
- Get JavaScript values into test context
1. Manage application-level configuration
1.1. Mapbox
- Sign up
1
a
Mapbox
2
account - Check email then click
Verify my email
- Copy
Default public token
from
Access tokens
3 - Paste it on
ENV.MAPBOX_ACCESS_TOKEN
variable
(see next section)
1.2. Edit application environment file
NOTE
config/environment.js
is used to configure app and store API keys
- Its values can be accessed from other parts of the app
- Server needs to restart for its values to be available to the app
2-3. Parameterize a component with arguments
IMPORTANT
This section include lessons for:
- 3. Access component arguments
2-3.1. Generate map
component
2-3.2. Edit map
component class
NOTE
get token() {…}
is an example of a getter method
- Its returned value can be accessed with
this
- e.g.
this.token
this.*
can be accessed on component's template and class files
4-5. Interpolate values in a template
IMPORTANT
This section include lessons for:
- 5. Override HTML attributes with
...attributes
4-5.1. Edit map
component
NOTE
- Ember
4
concatenates interpolated values and escapes any HTML- Ember applies attributes in the order they appeared (order matters)
- An HTML attribute before
...attributes
can be overridden- An HTML attribute after
...attributes
can not be overridden
4-5.2. Edit map
component test
NOTE
hasAttribute
test helper fromqunit
'sdom
supports regular expressions.
4-5.3. Run map
component test
4-5.4. Edit rental
component
4-5.5. Edit rental
component test
4-5.6. Run rental
component test
6. Refactor with getters and auto-track
6.1. Edit map
component class
NOTE
this.args
is an API provided by
Glimmer
5
component superclassthis.args.*
in getters are auto-tracked by Glimmer component superclass@tracked
do not work with getters since its value can not be assigned directly
6.2. Edit map
component
6.3. Run map
component test
7. Get JavaScript values into test context
7.1. Edit map
component test
NOTE
this.setProperties
testing API accepts arbitrary values to a component
- It does not access or modify component's internal state
- It refers to a test context object which have access inside render helper