Lessons
- Extract markup into a component
- Invoke a component
- Pass content to a component
- Yield content with
yield
keyword - Refactor existing code
- Write a component test
- Use
application
template andoutlet
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
1'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
- Edit
app/templates/
'sindex.hb
,about.hb
andcontact.hb
templates - Remove
<div class="jumbo"><div class="right tomster"></div></div>
- 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 tovisit
(async) that must be used withawait
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