[002.5] Ember Weekly Drip #2 and Exercise - Showing a Contact and Adding Address

Links on: Serializers, route action helper, and a couple of interviews.; Also, an exercise to show a contact and add an address model.

Subscribe now

Ember Weekly Drip #2 and Exercise - Showing a Contact and Adding Address [09.12.2016]

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

Exercise

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 contacts.show 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 contacts.show 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.