How to work with nested routes in Ember.js

Question

I'm new to Ember.js and I stuck with nested routes and I need help.

This is what I want to achieve:

I think this is called Master-Detail page.

more systematically it looks something like this:

UsersIndexRoute displays list of people. UsersShowRoute displays information for particular person.

Here is my routes:

Router.map(function() {
  this.route('users', { path: '/users'}, function() {
    this.route('index', { path: ''}, function() {
      this.route('show', { path: '/:id' });
    });
  });
});

UserIndex Template looks like this:

{{#each item in model}}
  {{#link-to 'users.index.show' item.id}} {{item.firstName}} {{item.lastName}}{{/link-to}}
{{/each}}

When I try URL like 'http://localhost:4200/users/1' for example, according to debugger I am be able to reach controller 'users.index.show' (the desired one)

The route for UserShowRoute looks like this:

export default Ember.Route.extend({
  renderTemplate: function() {
    this.render({
      outlet: 'detail'
    });
  },
  model: function(params) {
    return this.store.find('user', params.id);
  } 
});

I am using ember-cli 1.13.8

I hope my explanation makes some sense to you. Thanks in advance.

I can not find the question. You provide code that looks fine. If it does not work, could you post stacktrace — kris
@kristjanreinhold when I set ENV.APP.LOG_TRANSITION to true, it says 'Transitioned into 'users.index.show' — SuperManEver
@kristjanreinhold I added 'console.log' to the model hook on the UsersShowRoute and it prints to the console. It looks like something wrong template rendering. — SuperManEver
@kristjanreinhold I made repo on github in case I haven't provided enough information github.com/SuperManEver/nested_routes — SuperManEver

kris kris · Accepted Answer · 2015-10-25T19:15:46

Ok i've updated your code abit. mostly the logics of routing itself. Also the each loop was used in a deprecated way.

router.js

this.resource('users', function() {
  this.route('index');
  this.route('view', { path: 'view/:id' });
});

routes/users/index

export default Ember.Route.extend({
    model: function() {
        return this.store.find('user');
    } 
});

templates/users/index

{{#each model as |item|}}
   {{#link-to 'users.view' item.id}} 
       {{item.firstName}} {{item.lastName}}
   {{/link-to}}
{{/each}}

routes/users/view.js

export default Ember.Route.extend({

  model: function(params) {
    return Ember.RSVP.hash ({
      person: this.store.find('user', params.id);
    })
  } 
});

templates/users/view.hbs

{{model.person.firstName}}

  ---- content ---

How to work with nested routes in Ember.js

1 Answers