This week, we'll add a nested route for showing contacts, as well as an address model. But first, some links.

This week's links cover: Serializers, route action helper, and a couple of interviews.


Ember Serializers

Ember route action helper

Earlier we sent an action from a component to a controller. This made sense in our case as we were modifying query params. However, in many cases it makes sense to send actions from your component to the route rather than a controller. Until routable components land we need a little help(er) for that. This addon makes it possible to call route actions from a component.

Talking with Tom Dale about Ember FastBoot and the Return of Scrappy JavaScript by Matthew Creager

JavaScript Air - JavaScript Frameworks: Ember


To build on the information that we went over this week, let's return to our contact-manager app one last time. Let's create a new show route that is a child of our existing contacts route. When linking to the new route use a link-to that forces the new to fire the route's model hook. Finally, we will add an address model, that has a one-to-many relationship with a contact.

There are a few things that need to happen:

  • Generate a route
  • In the contacts template, add the appropriate link-to and make sure you have a {{yield}} in the template
  • In the new route fetch the correct record (hint: you will need to pass in params to your model hook e.g. model(params){...})
  • Your new address model should have a street1, street2, city, state, zip
  • In the show template display all properties of the contact as well as all of the contact's addresses and all the address fields.