Series: EmberSchool Samples: Introduction to Routing

URL Parameters

Published on Jul 01, 2016

URL Parameters help Ember know which data to display in your route. This video shows how to use URL parameters in a Route, and how Ember can use them in a default Route.

Code

//router.js
Router.map(function(){
  //...
  this.route('favorite-word', {path: 'favorite-word/:word'});
});
//templates/favorite-word.hbs
My favorite word is {{model.word}}
//routes/favorite-word.js
//same behavior as default
export default Ember.Route.extend({
  model(params){
    return params
  }
})

Transcript

We’ve learned how to do the basic route. Now it’s time to show how to do some more complex things with the route declarations.

So let’s say that we want to create a route called favorite-word, and when we’re going to this route, we want to pass in a favorite word. So what it’ll look like is favorite-word/tacos or favorite-word/ember. So we’re going to name the route favorite-word, then we’re going to give it a path and this path will be... it’ll start with favorite-word, but then it’ll have a slash and then it’ll have a variable, and we’re going to call that variable, that parameter, word.

If you create a template for this route, then you’ll be able to access that parameter on model., then the name of the parameter, in this case word. And as you can see, it’s passed in tacos. And if we change this, hey, it uses the new word.

So you may have a question. We’re using model.word, but where are we defining model? In our foods route, we had to define the model on the route and return a value. Well it turns out that if you put in a parameter, then it’ll do a default route. Here’s something like what this route might look like. We would define our model, and now it has an argument which we’ll call params, and then we’ll just return params. And as you’ll see, this gets us the exact same result. So this entire routes file, not actually needed. Three cheers for good defaults.

So that’s how you can define parameters in your url. The next video will show us a more useful application of that.

EmberSchool Samples: Introduction to Routing

Subscribe to our mailing list