Search code examples
ember.jsrouterember-router

how to achieve this.resource() with new this.route() in ember for highly nested routes ?


im in the process of upgrading ember1.x to 3.x and i have an issue with router where it was used this.resource for nested routes and now it is depreciated and changed to this.route

but when it comes to nested route its not working anymore if i futher explain, let say

this.resource( 'parent1', { path: '/' }, function() {

    this.route( 'someroute1', { path: '/' } );
    this.route( 'someroute2', { path: '/someroute2' } );


    this.resource( 'parent11', { path: '/app' }, function() {

      this.route( 'someroute11', { path: '/' } );
      this.route( 'someroute12', { path: '/someroute12' } );

      this.resource( 'parent111', { path: '/:paramid' }, function() {
      this.route( 'index', { path: '/' } );
      this.route( 'someroutewanttogo', { path: '/pathrouteiwanttogo' } 
  );
});

This was before and i was routing to the last route as

this.transitionTo('parent111', id)

this worked perfectly.

then i changed resource to route as below

this.route( 'parent1', { path: '/' }, function() {

    this.route( 'someroute1', { path: '/' } );
    this.route( 'someroute2', { path: '/someroute2' } );


    this.route( 'parent11', { path: '/app' }, function() {

      this.route( 'someroute11', { path: '/' } );
      this.route( 'someroute12', { path: '/someroute12' } );

      this.route( 'parent111', { path: '/:paramid' }, function() {
      this.route( 'index', { path: '/' } );
      this.route( 'someroutewanttogo', { path: '/pathrouteiwanttogo' } 
  );
});

then the route was not found in the route transitionTo() so then i tried to call

this.transitionTo('parent1.parent11.parent111', id );

but this is lost is nowhere as its not triggering controller of parent111 or either children.

what i did wrong in here?


Solution

  • issue was even though i changed the resource to route, i didnt change the file system and files according to the which route defined. therefore i had to change all the files according to the route structure which is defined. that solve my issue on the route not loading for ember 3.5