9

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.

Improve this question
4
  • Did you try to use the full route instead of the id alone ?
    – sam
    Commented May 10, 2015 at 18:13
  • Also it does not look like it is processing your course.id ?
    – sam
    Commented May 10, 2015 at 18:22
  • Yeah, I tried route: courses, params: { id: course.id } but that didn't work either. It did work before I introduced child routers.
    – user677526
    Commented May 10, 2015 at 18:22
  • This dont work at all
    – Shahid Karimi
    Commented Nov 22, 2017 at 17:41

1 Answer 1

Reset to default
14

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 }" ...
Improve this answer
10
  • 1
    No. route-href passes this.route to the generate method of router. generate does name its parameter "name", but that has nothing to do with it. I tried this, and it didn't work. Wish it had, though. Unfortunately, I'll probably just have to put together a test case for this.
    – user677526
    Commented May 12, 2015 at 2:53
  • I take this back, actually. I'm looking through this more and it looks like you might be correct - this still doesn't work, but it looks as though the route-recognizer module looks at route.handler.name, and the route configuration is passed in as the handler. I'm really not sure how this works, though.
    – user677526
    Commented May 12, 2015 at 3:12
  • 2
    Whoops! I just got this working on my machine. We were using a , in the route-href when we should have been using a ; facepalm. I have edited the answer, it should work now.
    – Josh Graham
    Commented May 13, 2015 at 0:59
  • Wow. That worked. I suppose I didn't expect a full JS expression inside the route-href handler - I neither expected the semicolon, nor the params.bind statement. Is there documentation for this? I'm willing contribute documentation on route-href usage, as I'm sure it'll help people who aren't yet familiar. I will say, it's a bit odd to see part of the binding language inside an expression like that. I wouldn't have expected it to have been parsed.
    – user677526
    Commented May 13, 2015 at 1:49
  • Additionally, the more I think about it....this worked with the original route, without any child routers involved. Wouldn't it be better to keep the behavior as uniform as possible? The route-href handler should probably access the underlying JS file for the view in which it resides, and then walk the parent chain from there (if necessary). This would enhance modularity and promote a uniform code standard regardless of the nested level.
    – user677526
    Commented May 13, 2015 at 1:53