"Dynamic segment" in Ember.js?

Question

Throughout the Ember.js documentation, one finds the concept of dynamic segment mentioned at several places. What does it mean?

Answer 1

Updating with a proper sample: Demo | Source

Edit due to questions in comments:

In Ember, think of the Router mechanism as a State Machine: Each Route can be seen as a State. Sometimes tho, a state can have it's own little state machine within it. With that said: A resource is a state which you have possible child states. A PersonRoute can be defined as either as a resource our a route in the <Application>.Router.map callback; it really depends on your end goal. For example, if we think of a resource for a list of people based on a person model, we would potentially have a route to list all records.

App.Router.map(function() {
    this.resource('people');
});

With this map, I'm telling my app that it needs a people template (and maybe a view), a people controller and a people route. A resource is also assumed to have a index route, which is implied and you don't have to code it, but if you need to, it would be PeopleIndexRoute, after the name of the resource itself, by convention.

Now I can (a) create a person route under people resource to be a single state of a person record; or (b) I can create a person resource under the people resource, so I would have more options under person resource (edit, detail, delete); or (c) I could create a separate resource for person, and use the path to override the url if I want to.

I sometimes go for option c:

App.Router.map(function() {
    this.resource('people');
    this.resource('person', {path: 'person/:person_id'}, function() {
        this.route('edit');
        this.route('delete');
    });
});

That would make sense that edit is route since it doesn't have child states , only siblings (delete) and a parent (person). The url for a record would be something like this: ~/#/person/3/edit).

The routes, when not defined as a resource, won't have any child route/state, so you don't have person.edit.index like you have person.index, in other words, routes don't have child, only siblings and resources can have both.

Right now, the Routing Guide is the most solid piece of documentation we have about this. I strongly recommend it.

---

Dynamic Segment is a part of a route URL which changes according to the resource in use. Consider the following:

App.Router.map(function() {
    this.resource('products', function() {
        this.route('product', { path: ':product_id' })
    }
});

In the stub above, the line:

this.resource('products', function() {

will produce the url

~/#/products

and the following line will produce

~/#/products/:product_id

replacing the dynamic part, you could have an url like this

~/#/products/3

the :product_id is what makes this route dynamic. The router will serialize the id of a resource (for example a Product model) to the URL and it also uses that id to find the a model in your DS.Store. You'll often see this in routes like the following:

App.ProductRoute = Em.Route.extend({
    model: function(params) {
        return App.Product.find(params.product_id);
    }
});

So for this example, if you access ~/#/products/3, the app will then try to load an instance of the Product model from your store or try to fetch from your backend API.

You can see a fiddle that illustrates that here | source here

I also recommend this screencast by Tom Dale where he builds a blog reader app with Ember.js using the router and the ember-data API to load blog records based on the dynamic part of the URL.