Ember.js: Tutorial — Part 1: Reusable Components

Lessons

1. Manage application-level configuration
2. Parameterize a component with arguments
3. Access component arguments
4. Interpolate values in a template
5. Override HTML attributes with ...attributes
6. Refactor with getters and auto-track
7. Get JavaScript values into test context

1. Manage application-level configuration

1.1. Mapbox

1. Sign up
   ¹
   a
   Mapbox
   ²
   account
2. Check email then click Verify my email
3. Copy Default public token from
   Access tokens
   ³
4. 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
  ⁴
  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 from qunit's dom 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
  ⁵
  component superclass
• this.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

7.2. Run map component test

References

• Mapbox
  ¹
  • Sign up
    ²
  • Access tokens
    ³
• Ember
  ⁴
• Glimmer
  ⁵