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.
# app/assets/javascripts/router.js.coffee App.Router.map -> @resource 'leads', path: '/', -> @resource 'lead', path: '/leads/:id'
// app/assets/javascripts/router.js App.Router.map(function() { this.resource('leads', { path: '/' }, function() { this.resource('lead', { path: '/leads/:id' }); }) })
Make sure to add , ->
after the leads resource.
We need a Route Object to pull down our specific lead.
# app/assets/javascripts/routes/lead.js.coffee App.LeadRoute = Ember.Route.extend model: (params) -> @store.find 'lead', params.id
// app/assets/javascripts/routes/lead.js App.LeadRoute = Ember.Route.extend({ model: function(params) { return this.store.find('lead', params.id) } })
We have access to id
through the params
argument.
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.
// app/assets/javascripts/templates/lead.js.emblem article#lead h1= model.fullName p ' Name: model.fullName p ' Email: model.email p ' Phone: model.phone
The single quote '
leaves a trailing whitespace after the line.
Open your leads template so you can create a link to each lead:
// app/assets/javascripts/templates/leads.js.emblem article#leads h1 Leads ul each lead in controller link-to 'lead' lead tagName="li" lead.fullName outlet
Two things are happening here.
First, our 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.