将 route-href 与子路由器一起使用答案

【问题标题】：Using route-href with child routers将 route-href 与子路由器一起使用
【发布时间】：2015-05-10 16:16:22
【问题描述】：

我正在尝试在子路由器的视图中使用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)"

有什么想法吗？谢谢。

【问题讨论】：

您是否尝试使用完整路由而不是单独使用 id ？
另外它看起来不像是在处理你的 course.id ？
是的，我试过route: courses, params: { id: course.id }，但也没有用。在我引入子路由器之前它确实有效。
这根本不起作用

标签： javascript aurelia

【解决方案1】：

看起来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 }" ...

【讨论】：

没有。 route-href 将this.route 传递给路由器的generate 方法。 generate 确实将其参数命名为“name”，但这与它无关。我试过这个，它没有用。不过，希望它有。不幸的是，我可能只需要为此编写一个测试用例。
事实上，我收回了这一点。我正在查看更多内容，看起来您可能是正确的 - 这仍然不起作用，但看起来路由识别器模块看起来像 route.handler.name，并且路由配置作为处理程序传入。不过，我真的不确定这是如何工作的。
哎呀！我刚刚在我的机器上运行了这个。我们在route-href 中使用了,，而我们应该使用; facepalm。我已经编辑了答案，它现在应该可以工作了。
哇。那行得通。我想我没想到 route-href 处理程序中有一个完整的 JS 表达式——我既不期望分号，也不期望 params.bind 语句。有这方面的文件吗？我愿意提供有关 route-href 用法的文档，因为我相信它会帮助那些还不熟悉的人。我会说，在这样的表达式中看到部分绑定语言有点奇怪。我没想到它会被解析。
此外，我想得越多……这适用于原始路由，不涉及任何子路由器。保持行为尽可能统一不是更好吗？ route-href 处理程序可能应该访问其所在视图的底层 JS 文件，然后从那里遍历父链（如有必要）。这将增强模块化并促进统一的代码标准，无论嵌套级别如何。