When we click on a lead we should see it appear on the right. Let’s do it.
First we’ll need to add a resource to show a specific lead. Since we want the list of leads to still remain present on the page when we show a lead, this resource should be nested under the leads resource.
Make sure to add
, -> after the leads resource.
We need a Route Object to pull down our specific lead.
We have access to
id through the
this.store.find function gets a record by its id. It actually returns a promise which Ember will attempt to resolve.
Our template will show the information about our lead.
The single quote
' leaves a trailing whitespace after the line.
Open your leads template so you can create a link to each lead:
Two things are happening here.
li became a
link-to. We passed it
tagName="li" so that the html element will be an
li. You can set any property on a view this same way,
propertyName="value", when you are using the view helper.
Second, we’ve placed an
outlet tag at the end of the template. Since the lead route is nested under leads, its content will appear in this outlet. In this case the markup is on the same level in the DOM so this doesn’t present a problem. If you had a situation where you needed to output the content elsewhere on the page you could use the renderTemplate method in the route to specify an outlet somewhere else.
One nice thing about the
link-to helper is that it automatically adds a class of
active to the element when you are on the route it’s linking to. Our stylesheet takes advantage of this to highlight the currently selected lead.
Now refresh the page and click on a lead. You should see that lead’s information show up on the right, and it should be snappy.
Next we’ll create form elements and save data.