Merge pull request #476 from 3cp/sync-contact-manager

fix(contact-manager-tutorial): update description to match latest code example

Author: EisenbergEffect

current/en-us/2. tutorials/2. creating-a-contact-manager.md

@@ -281,7 +281,12 @@ Finally, we have a `select` method for selecting a contact. We'll revisit this s
 <template>
   <div class="contact-list">
     <div class="list-group">
-      <a repeat.for="contact of contacts" class="list-group-item list-group-item-action ${contact.id === $parent.selectedId ? 'active' : ''}" route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
+      <a
+        repeat.for="contact of contacts"
+        class="list-group-item list-group-item-action ${contact.id === $parent.selectedId ? 'active' : ''}"
+        route-href="route: contacts; params.bind: {id:contact.id}"
+        click.delegate="$parent.select(contact)"
+      >
         <strong>${contact.firstName} ${contact.lastName}</strong><br>
         <small>${contact.email}</small>
       </a>
@@ -290,9 +295,13 @@ Finally, we have a `select` method for selecting a contact. We'll revisit this s
 </template>
 ```
 
-The markup above begins by repeating an `li` for each contact of our contacts array. Take a look at the class attribute on the `li`. We've used an interesting technique here to add an `active` class if the contact's id is the same as the `selectedId` of the contact on our `ContactList` view-model. We've used the `$parent` special value to reach outside of the list's scope and into the parent view-model so we can test against that property. Throughout the list template, we've used basic string interpolation binding to show the `firstName`, `lastName` and `email` of each contact.
+The markup above begins by repeating an `<a>` for each contact of our contacts array.
 
-Take special note of the `a` tag. First, we are using a custom attribute provided by Aurelia's routing system: `route-href`. This attribute can generate an `href` for a route, based on the route's name and a set of parameters. Remember how we named the contacts route in our configuration? Here we're using that by referencing the "contacts" route name and binding the contacts's `id` parameter as the route's `id` parameter. With this information, the router is able to generate the correct `href` on the `a` tag for each contact. Additionally, we've also wired up a `click` event. Why would we do this if the `href` is already going to handle navigating to the correct contact? Well, we're looking for instant user feedback. We want the list selection to happen ASAP, so we don't have to wait on the navigation system or on the loading of the contact data. To accomplish this, we use the `select` method to track the selected contact's `id`, which allows us to instantly apply the selection style. Finally, normal use of `.trigger` or `.delegate` causes the default action of the event to be cancelled. But, if you return true from your method, as we have done above, it will be allowed to continue. Thus, when the user clicks on the contact, we immediately select the contact in the list and then the `href` is allowed to trigger the router, causing a navigation to the selected contact.
+Take a look at the class attribute on the `<a>`. We've used an interesting technique here to add an `active` class if the contact's id is the same as the `selectedId` of the contact on our `ContactList` view-model. We've used the `$parent` special value to reach outside of the list's scope and into the parent view-model so we can test against that property. Throughout the list template, we've used basic string interpolation binding to show the `firstName`, `lastName` and `email` of each contact.
+
+Take special note on `route-href` attribute on the `<a>`. First, we are using a custom attribute provided by Aurelia's routing system: `route-href`. This attribute can generate an `href` for a route, based on the route's name and a set of parameters. Remember how we named the contacts route in our configuration? Here we're using that by referencing the "contacts" route name and binding the contacts's `id` parameter as the route's `id` parameter. With this information, the router is able to generate the correct `href` on the `a` tag for each contact.
+
+Additionally, we've also wired up a `click` event. Why would we do this if the `href` is already going to handle navigating to the correct contact? Well, we're looking for instant user feedback. We want the list selection to happen ASAP, so we don't have to wait on the navigation system or on the loading of the contact data. To accomplish this, we use the `select` method to track the selected contact's `id`, which allows us to instantly apply the selection style. Finally, normal use of `.trigger` or `.delegate` causes the default action of the event to be cancelled. But, if you return true from your method, as we have done above, it will be allowed to continue. Thus, when the user clicks on the contact, we immediately select the contact in the list and then the `href` is allowed to trigger the router, causing a navigation to the selected contact.
 
 Ok, now that we've got the contact list built, we need to use it. To do that, update your `app.html` with the following markup: