Series: EmberSchool Samples: Introduction to Routing

Finding Records with URL Parameters

Published on Jul 06, 2016

URL Parameters can be used to specify which records you want used on a page. Learn how to do this manually, then see how it matches up with Ember's intelligent defaults.

Code

//in router.js
this.route('food', {path: 'foods/:food_id'});
//templates/food.hbs
My food is {{model.name}}
//routes/food.js
export default Ember.Route.extend({
  //this is equivalent to the default
  model(params){
    return this.store.findRecord('food', params.food_id);
  }
})

Transcript

The last video showed us how to use a parameter in the url. Now we’ll go with a more realistic example. So we’ll have a food route, and it will be at foods, and then we’ll give the id of the food. If we go and create a template, then we’ll see that our food has been put in the model, and here we’re calling .name to get the food name. And sure enough if we put in the id 1, then we get Tacos. So this is a little bit more mysterious than the last one. How do we turn an id of 1 into the word tacos or more specifically the object which has the value of tacos at its name key?

The answer of course is in the route that is auto-generated for us. So we’ll generate a route and recreate that. So we can define a new model method and it’ll take params. And what we’re going to do here is we’re going to go to the store. And previously on foods, plural, we’ve called findAll, but there’s another method on the store called findRecord, and that finds one record and it takes two arguments. It’ll take the type of record, it’s the same as before, and then it’ll take the id of that record, which you could put in just as an integer or you could take from the params. So this is what’s there by default if you don’t define the model method on the route. So once again hurray for good defaults. We’ll go ahead and leave this one in here as a reminder, but leave a comment.

So let’s say we wanted to link-to the food route. Would this be enough? No, it would not. Well it does put a link there. Clicking on it does nothing. What we need to do is add a second argument to food. And here we go, we’ll just pass in the object. Now when we click on this, it’ll take us to the correct page.

You can also put in the id of the food instead of just the object. The difference here is that food.id will definitely go through this model method, whereas if you pass in the object directly, it’ll skip the model method. So we’ll show this by messing it up and seeing that it will still work when we click on that link. But then when we reload it’ll rely on the model method and not work. Okay, now let’s get the model method back to normal.

So what we’ve learned in this video is that ids that are passed in to a route with the name of a model are automatically used to find that model with that id. Then we learned that link-to requires another parameter that gives either the id or the object. Finally, this sort of page which shows one of a certain type of item is sometimes called a show page. This is because when you have a lot more data, this is typically where you show the more detailed data about that model.

EmberSchool Samples: Introduction to Routing

Subscribe to our mailing list