对子路由器使用route-href

时间:2015-05-10 16:16:22

标签: javascript aurelia aurelia-templating-router aurelia-router

我正在尝试在子路由器的视图中使用route-href属性。我的父路由器看起来像这样:

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

    this.router = router;
}

我的孩子路由器看起来像这样:

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

    this.router = router;
}

这是我的route-href属性......

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

当我使用它时,我希望route-href使用来自子路由器的路由。相反,我得到了这个堆栈跟踪。查看代码,我看到RouteHref调用router.generate来创建路由。 router.generate应该递归地沿着路由器层次走,这应该不是问题。但是,我不确定将哪个路由器传递给route-href构造函数。我认为这里有两个问题 - 首先,我不确定route-href是否正在接收正确的路由器,其次,我不确定route-href是否或如何处理具有空路由的表达式

堆栈追踪:

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)"

有什么想法吗?感谢。

1 个答案:

答案 0 :(得分:14)

看起来route-href使用路由的name属性。

也许你的孩子路由器应该是这样的:

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

    this.router = router;
}

并在您看来:

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