Using route-href with child routers

Question

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/[email protected]/index.js:244:19)↵    at AppRouter.generate (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/router.js:210:38)↵    at Router.generate (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/router.js:207:32)↵    at RouteHref.processChange (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/route-href.js:42:34)↵    at RouteHref.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/route-href.js:30:16)↵    at BehaviorInstance.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/behavior-instance.js:68:35)↵    at View.bind (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/view.js:68:26)↵    at ViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/view-factory.js:173:18)↵    at BoundViewFactory.create (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/view-factory.js:127:35)↵    at Repeat.processArrayItems (http://localhost:9000/jspm_packages/github/aurelia/[email protected]/repeat.js:132:32)"

Any ideas? Thanks.

Answer 1

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 }" ...