Ember route with dynamic segment

1

I am new to EmberJS. As per the Ember documentation, A route with a dynamic segment will only have its model hook called when it is entered via the URL. If the route is entered through a transition (e.g. when using the link-to Handlebars helper), then a model context is already provided and the hook is not executed. Routes without dynamic segments will always execute the model hook.

Could you please explain the above with a simple example.

2

Just write a console.log in the https://github.com/broerse/ember-cli-blog/blob/master/app/routes/post.js model function and see the result.

GitHub - broerse/ember-cli-blog: Tom Dale's blog example updated for the Ember CLI ( Myapp ) runs without a CouchDB backend.

3

A route with a dynamic segment looks like:

www.example.com/items/52

In this case, “52” is the dynamic segment, as we can see in the Router def:

Router.map(function() {
    this.route("items", {path: "/items"}, function() {
        this.route("item", {path: "/:id"});
    });
});

The url matching the 1st route would be /items while the url matching the child route would be /items/[some id]

… where “some id” is the dynamic segment.

Note that the name of the child route is “item”, while the string in the url itself is the concatenation of the parent route. The name simply identifies in which route file to find the route logic.

When we load the 1st route, typically Ember will fetch a list of items – the index route. Also typically, the template will have something along the lines of:

{{#each model as |item|}}
    {{#link-to "lists.list" item}}
    <p>{{item.name}}</p>
    {{/link-to}}
{{/each}}

This creates a list of links, one for each item. When we follow one of those links, Ember (or Ember-Data) will aready have a the appropriate item in its list of item models that had been fetched in the parent (index) route. Because Ember already has the object the model hook is not called.

However, if one were open the above link directly, the browser will make a direct request for the resource “/items/52”, so Ember will be forced to first deal with fetching the appropriate model.

1 Like