This week we are going to put some of our newfound knowledge about Routes and Components into use by continuing to iterate on the simple contacts application that we started on last week.

Solution

In the last drip, you were asked to create an index route that is the child of contacts. This part was relatively straight forward. All you needed to do was create a template in app/templates/contacts/index.hbs and add the following line: 

<h3>Welcome to the contacts index route</h3>

The index route is the default path so, we didn't need to add in index path to the router.js or add a routes/contacts/index.js route. However, we did need to tell Ember to render children routes of contacts. We can do this by passing in an empty function as the second argument to the contacts route mapping in the router: 

Router.map(function() {
  this.route('contacts', function(){});
});

Next you were asked to create an index template. In this case, no route or router modifications were necessary at all, only the creation of an app/templates/index.hbs and inclusion of the specified text: 

<h2>Welcome to our Contacts App!</h2>

The final portion of the exercise was to create two links to our index and contacts routes using the link-to helper. In app/templates/application.hbs it might look like this: 

{{link-to 'Home' 'index'}} {{link-to 'Contacts' 'contacts'}}
{{outlet}}

The link-to helper comes in two variants. An inline version, as shown above, and a block version. The block version would look like the following: 

{{#link-to 'index'}}
  Home
{{/link-to}}

Resources: