Combining parameters, splat routes and child routers

Question

We are trying to use route parameters alongside splat routes. This is the scenario.

We have a navigation menu, and then as part of one of the options, we have a wizard. When we go to the wizard, we want to pass the identifier for the object we are working on. At the same, the wizard has steps and we want to handle those at the child level router, passing also the step as part of the route (*details).

The splat route looks like this:

   { route: 'offer/:offerId/*details', moduleId: 'offerbuilder/index', title: 'Offer Builder' }

The children routes look like this:

[
   { route: 'parameters', moduleId: 'parameters', title: 'Parameters', nav: true },
   { route: 'cart', moduleId: 'cart', title: 'Cart', nav: true },
   { route: 'workspaces', moduleId: 'workspaces', title: 'Workspaces', nav: true }
]

We've got the router and child router to resolve the routes appropriately, but the issue we are having is that the hashes for the children routes don't replace the passed parameter value, but use the original pattern. In other words, this do work:

 http://oursite/main/#offer/123456789/parameters

but the hashes generated as part of the wizard steps are:

  http://oursite/main/#offer/:offerId/parameters

My question is, do splat routes support the inclusion of parameters? If not, what would be the suggested workaround?

Answer 1

This is currently an issue with the child router, which is discussed here.

The solution is to pull the parentId and manually construct the hashes for the child router.

var childRouter = router.createChildRouter()
   .makeRelative({
      moduleId: 'employees/doctors',
      route: 'doctors/:id',
   });

return {
   router: childRouter,
   activate: function() {
      var doctorID = router.activeInstruction().params;

      childRouter.map([
         { route: '', moduleId: 'patients/index', hash: '#employees/doctors' + doctorID(), nav: true },
         { route: 'schedule', moduleId: 'schedule/index', hash: '#employees/doctors/' + doctorID() + '/schedule', nav: true }
      ]).buildNavigationModel();
   }
};