CODEWITHSUNDEEP
ember.jsember-cli
SuperManEver
SuperManEver

Reputation: 2362

How to work with nested routes in Ember.js

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

This is what I want to achieve:

enter image description here

I think this is called Master-Detail page.

more systematically it looks something like this:

enter image description here

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' });
    });
  });
});

enter image description here

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)

enter image description here

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.

Upvotes: 0

Views: 3786

Answers (1)

kristjan reinhold
kristjan reinhold

Reputation: 2048

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 ---

Upvotes: 4

Related Questions