Lessons
- Generate a component
- Organize code with a namespaced component
- Forward HTML attributes with
...attributes
- Determine appropriate amount of test coverage
1. Generate a component
1.1. Generate rental
component
NOTE
Component generator generates the following files:
- A template
- e.g.
app/components/<component>.hbs
- A test file
- e.g.
tests/integration/components/<component>-test.js
- A class file with
-gc
- e.g.
app/components/<component>.js
1.2. Edit rental
component
1.3. Edit rental
component test
1.4. Run rental
component test
1.5. Edit index
template
NOTE
Visit localhost:4200 to see 3 rental listings.
2. Organize code with a namespaced component
2.1. Generate image
namespaced component
NOTE
- A namespaced component is generated with
/
- e.g.
rental/image
- Invoke a namespaced component with
::
- e.g.
<Rental::Image>
- Namespacing allows organizing components by directories
3. Forward HTML attributes with ...attributes
3.1. Edit image
namespaced component
NOTE
...attributes
keyword is also referred to as splattributes syntax
- It allows arbitrary HTML attributes to be passed to a component
- It is similar to
yield
keyword except that it is for attributes, not contents