Now we have successfully returned the data fetched from the server on the invocation of a route. Let's move ahead and see how can we make our routes dynamic. Till now, the URL that maps to our routes has been fixed. There may be situations in which we may want to read parts of URL and then act according to what was received. For example, we may want to make the /products/:product_id route, which shows the product page with ID equal to :product_id, or, like in our above example, we may want to create a new route /commits/:sha to display the information of a specific commit.

The above dynamism in Ember.js routes is achieved through dynamic segments. Dynamic segments in routes start with :. Let's see this by an example. We shall continue the above example and create a new screen to link to template that shows information about a specific commit.

Let's look at the JavaScript code. First, in the router, we need to define two routes—one for complete list of the commits and one for individual detail of a specific commit:

Router.map(function(){
  this.resource("commits",function(){
    this.route("commit",{path:":sha"});
  });
});

This would result in a route hierarchy that is similar to the following figure:

Route hierarchy of the GitHub commits application

You can see that at the top level is the application route. We get the index route for free, but we are not using that route in our application, as we would focus on the commits resource here.

Now, since we created commits as a resource, we would get commits.index route automatically by the framework, which would map to the /commits/ URL.

The commit route created inside the commits resource is meant to show the details of a particular commit. As you can see in the router code, we have made this route dynamic by including the :sha dynamic segment into it:

this.route("commit",{path:":sha"});

Let us now look at the route's code:

import Ember from "ember";

export default Ember.Route.extend({
  model: function(params){
    console.log("model hook called");
    varurl = 'https://api.github.com/repos/emberjs/ember.js/commits/'+ params.sha;
    return Ember.$.getJSON(url);
  },
  serialize: function(model){
    return {sha: model.sha};
  }
});

The commits.commit route fetches the details of a particular commit that is identified by a unique SHA and returns a model that contains the commit object.

This SHA makes our route dynamic and hence we would need to handle that in our routes. For that, we would need to get the dynamic segment from the params variable that is passed on to the model method.

varurl = 'https://api.github.com/repos/emberjs/ember.js/commits/'+ params.sha;

You can see that we use params.sha to access the dynamic segment we defined in the route. Please note here that the name of the dynamic segment is the one that we defined in the router, such as the following:

this.route("commit",{path:":sha"});

We just need to omit the : to get the variable name. Let's make it more clearer by another example.

If you defined a route with dynamic route as follows:

this.route("product",{path:"/products/:category/:name"});

Here, we have defined two dynamic segments in the URL: name and category. We can access these dynamic segments in our route by using params.category and params.name variables, respectively.

{{#link-to 'commits.commit' c}}{{c.sha}}{{/link-to}}

setupController: function(controller, model) {
  controller.set('model', model);
}

setupController: function(controller, model) {
  this._super(controller,model);
  controller.set("myProperty","myValue");
}