The first thing we’ll do on the Ember side is list out all of our leads.
Everything always starts with routes. Open up your Ember Router and create a leads resource with the path set to root:
# app/assets/javascripts/router.js.coffee App.Router.map -> @resource 'leads', path: '/'
// app/assets/javascripts/router.js App.Router.map(function() { this.resource('leads', { path: '/' }) })
Next we need to fetch all lead records. Let’s create a LeadsRoute
:
# app/assets/javascripts/routes/leads.js.coffee App.LeadsRoute = Ember.Route.extend model: -> @store.find 'lead'
// app/assets/javascripts/routes/leads.js App.LeadsRoute = Ember.Route.extend({ model: function() { return this.store.find('lead') } })
Remember that model
is a hook that’s called whenever the route is entered. The result of the model function is then available to the controller, view, and template.
To be sure this is working properly, simply visit your root route and look at the “Data” tab in the Ember Inspector. You should see all of your leads.
Now that we have our leads we need to show them. Let’s create a template:
// app/assets/javascripts/templates/leads.js.emblem article#leads h1 Leads ul each lead in controller li= lead.firstName
Now refresh the page and you should see your leads' listed on the left. Cool, right!?
Let’s create a property to display the leads' full names. Open the lead model and add it:
# app/assets/javascripts/models/lead.js.coffee fullName: ( -> @get('firstName') + ' ' + @get('lastName') ).property('firstName', 'lastName')
// app/assets/javascripts/models/lead.js fullName: function() { return this.get('firstName') + ' ' + this.get('lastName') }.property('firstName', 'lastName')
Then modify the template:
li= lead.fullName
Our leads are not in any particular order. This is chaos! Let’s sort them by name.
You can sort arrays of models by specifying sortProperties
in the controller. We don’t have a controller yet, so let’s make one:
# app/assets/javascripts/controllers/leads.js.coffee App.LeadsController = Ember.ArrayController.extend sortProperties: ['firstName', 'lastName']
// app/assets/javascripts/controllers/leads.js App.LeadsController = Ember.ArrayController.extend({ sortProperties: ['firstName', 'lastName'] })
sortProperties
takes an array of strings. These strings are the properties you want to sort by with the highest priority first.
Note that I’ve made this controller an ArrayController
. If you remember from the Controllers chapter, this is because the controller wraps an array of leads. Ember expects you to do this because ArrayController
defines certain things like sortProperties
that are not available on regular Controller
instances.
Refresh the page and marvel at the beauty of your sorted leads.
Next we’ll show each lead’s data when when we click on it.