Ember.js: Tutorial — Part 1: More About Components

Lessons

1. Generate a component
2. Organize code with a namespaced component
3. Forward HTML attributes with ...attributes
4. 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

3.2. Edit rental component

3.3. Edit image namespaced component test

3.4. Run image namespaced component test

4. Determine appropriate amount of test coverage

4.1. Edit rental component test

4.2. Run rental component test

References

• More About Components