jedd.ahyoung jedd.ahyoung - 2 months ago 86
Javascript Question

Using route-href with child routers

I'm attempting to use the

route-href
attribute inside a view in a child router. My parent router looks like so:

configureRouter(config, router){
config.title = 'Kali';
config.map([
// { route: '', moduleId: 'no-selection', title: 'Select'},
{ route: ['', 'courses'], moduleId: 'courses' }
]);

this.router = router;
}


My child router looks like so:

configureRouter(config, router){
config.map([
{ route: ['', '/'], moduleId: 'no-selection', title: 'Select'},
{ route: '/:id', moduleId: 'courses/course-detail' }
]);

this.router = router;
}


And here's my route-href attribute...

<a route-href="route: '', params: { id: course.id }" click.delegate="$parent.select(course.id)">


When I use this, I expect
route-href
to use the routes from the child router. Instead, I get this stacktrace. Looking through the code, I see that RouteHref calls
router.generate
to create the route.
router.generate
should walk up the router heirarchy recursively, so that shouldn't be a problem. I'm not sure, however, which router is being passed to the
route-href
constructor. I think there are two problems here - first, I'm not sure whether
route-href
is receiving the correct router, and second, I'm not sure if or how
route-href
handles an expression with an empty route.

Stack trace:

message: "There is no route named '', params: { id: course.id }"
stack: "Error: There is no route named '', params: { id: course.id }↵ at RouteRecognizer.generate (http://localhost:9000/jspm_packages/github/aurelia/route-recognizer@0.4.0/index.js:244:19)↵ at AppRouter.generate (http://localhost:9000/jspm_packages/github/aurelia/router@0.8.0/router.js:210:38)↵ at Router.generate (http://localhost:9000/jspm_packages/github/aurelia/router@0.8.0/router.js:207:32)↵ at RouteHref.processChange (http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.12.0/route-href.js:42:34)↵ at RouteHref.bind (http://localhost:9000/jspm_packages/github/aurelia/templating-router@0.12.0/route-href.js:30:16)↵ at BehaviorInstance.bind (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.0/behavior-instance.js:68:35)↵ at View.bind (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.0/view.js:68:26)↵ at ViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.0/view-factory.js:173:18)↵ at BoundViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/templating@0.11.0/view-factory.js:127:35)↵ at Repeat.processArrayItems (http://localhost:9000/jspm_packages/github/aurelia/templating-resources@0.11.0/repeat.js:132:32)"


Any ideas? Thanks.

Answer

It looks like route-href uses the name property of the route.

Perhaps your child router should look like this:

configureRouter(config, router){
    config.map([
        { route: ['', '/'], moduleId: 'no-selection', title: 'Select'},
        { route: '/:id',  moduleId: 'courses/course-detail', name: 'course-detail' }
    ]);

    this.router = router;
}

and in your view:

<a route-href="route: course-detail; params.bind: { id: course.id }" ...
Comments