Ember.js: Tutorial — Part 1: Component Basics

Lessons

1. Extract markup into a component
2. Invoke a component
3. Pass content to a component
4. Yield content with yield keyword
5. Refactor existing code
6. Write a component test
7. Use application template and outlet keyword

1-2. Extract markup into a component

IMPORTANT

This section include lessons for:

• 2. Invoke a component

1-2.1. Generate jumbo component

NOTE

• A component is
  Ember
  ¹'s
  way of creating a custom tag
• It is common to reuse similar component across different parts of the app

1-2.2. Edit jumbo component

NOTE

• Invoke jumbo component with <Jumbo>
• Ember distinguishes a component with a PascalCase named tag
  • e.g. super-awesome.hbs is invoked with <SuperAwesome>

3-5. Pass content to a component

IMPORTANT

This section include lessons for:

• 4. Yield content with yield keyword
• 5. Refactor existing code

3-5.1. Edit templates

1. Edit app/templates/'s index.hb, about.hb and contact.hb templates
2. Remove <div class="jumbo"><div class="right tomster"></div></div>
3. Wrap remaining HTML tags with <Jumbo></Jumbo>

NOTE

• Passing content to a component is done with yield keyword
• Invoking a component replaces its custom tag with its template
• Refactored code do not change any functionality and test results
• Encapsulated parts of template into component allows change in one place

6. Write a component test

6.1. Generate jumbo component test

NOTE

• Component test is also known as integration test or rendering test
  • Its file is also generated on component generation with -gc
  • It is used to render and test a single component at a time

6.2. Edit jumbo component test

NOTE

• A component test renders component and then do some actions with it
• Unlike an acceptance test, a component test do not need to navigate to a URL
• render is similar to visit (async) that must be used with await keyword
• Other than the above, testing is done similar with that of acceptance tests

6.3. Run jumbo component test

7. Use application template and outlet keyword

7.1. Generate nav-bar component

7.2. Edit nav-bar component

7.3. Destroy nav-bar component test

IMPORTANT

Delete nav-bar component test file to prevent test errors in this tutorial.

NOTE

nav-bar is tested against acceptance test not as a component in isolation.

7.4. Edit templates

Prepend <NavBar /> on top of file of templates:

• app/templates/index.hbs
• app/templates/about.hbs
• app/templates/contact.hbs

NOTE

• <NavBar /> is <NavBar></NavBar>'s self-closing alternative
• Ember provides an alternative self-closing for custom tags
• All custom tags must be closed properly

7.5. Edit super-rentals acceptance test

7.6. Run super-rentals acceptance test

7.7. Generate application template

NOTE

• application template is the default template rendered when app starts
• It does not have a URL but is used as base template extended across the app

7.8. Edit application template

NOTE

outlet keyword is replaced with contents of pages rendered within it.

7.9. Edit templates

Remove <NavBar /> from top of file of templates:

• app/templates/index.hbs
• app/templates/about.hbs
• app/templates/contact.hbs

7.10. Run all tests

References

• Component Basics
• Ember
  ¹