Ember.js: Tutorial — Part 2: Route Params

Lessons

  1. Route with a dynamic segment
  2. Link with a dynamic segment
  3. Component test with access to router
  4. Access parameters from a dynamic segment
  5. Share common setup code between tests

1. Route with a dynamic segment


1.1. Edit router

NOTE

  • Custom path can contain a dynamic segment
    • :rental_id is an example of a dynamic segment
    • It is substituted with a matching URL path

2. Link with a dynamic segment

2.1. Edit rental component

NOTE

@model generates appropriate dynamic segment from route's model.

2.2. Edit index route

NOTE

<LinkTo> uses id property from model to replace a dynamic segment.


3. Component test with access to router

3.1. Edit rental component test

NOTE

  • A component test do not setup router by default
  • this.owner object lookups service instance as test subject
  • setupRouter explicitly opt-in to use router
  • beforeEach hook runs once before each test (used for setup)
  • Alternatively, afterEach hook runs once after each test (used for cleanup)

3.2. Run rental component test


4. Access parameters from a dynamic segment

4.1. Generate rental route

4.2. Edit rental route

NOTE

  • params is an object being passed into model hook
    • It contains dynamic segment needed to fetch data from JSON endpoint
      • e.g. params.rental_id

4.3. Generate detailed namespaced component

4.4. Edit detailed namespaced component

4.5. Edit rental template

NOTE

Visit localhost:4200 then click a rental heading to go to their detailed page.


5. Share common setup code between tests

5.1. Edit detailed namespaced component test

5.2. Run detailed namespaced component test

5.3. Edit super-rentals acceptance test

5.4. Run super-rentals acceptance test


References

Show Comments