Same route nested in multiple resources ember.js

Posted by Daniel Upton on Stack Overflow See other posts from Stack Overflow or by Daniel Upton
Published on 2013-10-25T15:52:11Z Indexed on 2013/10/25 15:53 UTC
Read the original article Hit count: 318

Filed under:

I'm building an ember.js app which has a model called "Programme".

A user can drill down to a programme by going:
Genre > Subgenre > Programme or Folder > List > Programme

Here's my router:

this.resource('mylists', { path: '/' }, function() {
  this.resource('folder', { path: '/folder/:folder_id' }, function() {
    this.resource('list', { path: '/list/:list_id' }, function() {
      this.resource('programme', { path: '/programme/:programme_id' });
    });
  });
});

this.resource('catalogue', function() {
  this.resource('genre', { path: '/genre/:genre_id' }, function() {
    this.resource('subgenre', { path: '/subgenre/:subgenre_id' }, function() {
      this.resource('programme', { path: '/programme/:programme_id' });
    });
  });
});

The UI needs to be deeply nested (the genre view renders in the outlet of the catalogue template, the subgenre in the outlet of the genre template... and so forth).

The problem I have is as both generated routes are called ProgrammeRoute when I linkTo the programme route inside the list template, it actually goes to the programme route nested in the subgenre route.

What should I be doing here?

To work around it I've named one route ListProgrammeRoute and SubgenreProgrammeRoute but that leads to some duplication.

© Stack Overflow or respective owner

Related posts about ember.js