Durandal 2.0 - 用于嵌套菜单的子路由器？

Question

我正在构建一个应用程序，并希望显示一个 2 层菜单，这两层始终可用。杜兰达尔 2.0 introduced their new router ，它支持“子路由器”，可以更轻松地进行深层链接。

我的问题 - 我可以永久加载我的“子”导航路线吗(并且在父项不事件时呈现子菜单)，还是“子路由器”设计旨在延迟加载它们以在要评估深层链接时对其进行评估?

Durandal 示例显示 主导航注册一个 splat 路由，然后当该 View 模型被加载/激活时，子路由被注册。

例如:在 Durandal 2.0 提供的示例中，mian nev 注册在 shell.js

router.map([
                { route: ['', 'home'], moduleId: 'hello/index', title: 'Validation test', nav: true },
                { route: 'knockout-samples*details',    moduleId: 'ko/index',               title: 'Knockout Samples',  nav: true, hash: '#knockout-samples' }
            ]).buildNavigationModel()
              .activate();

和 ko/index.js View 模型然后注册 child (在 activate() 上)

var childRouter = router.createChildRouter()
        .makeRelative({
            moduleId:'ko',
            fromParent:true
        }).map([
            { route: '',                moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro' },
            { route: 'helloWorld',      moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro',      nav: true},
            { route: 'clickCounter',    moduleId: 'clickCounter/index',     title: 'Click Counter',         type: 'intro',      nav: true}
        ]).buildNavigationModel();

而我正在寻找 在一个地方定义我的路线，例如:

 var routes = [
   { route: ['', 'home'], 
        moduleId: 'hello/index', 
        title: 'Validation test', 
        nav: true },
   { route: 'knockout-samples*details',    
        moduleId: 'ko/index',
        moduleRootId: 'ko', // Custom property to make child routes easier              
        title: 'Knockout Samples',  
        nav: true, 
        hash: '#knockout-samples',
        childRoutes: [
            { route: '',                moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro' },
            { route: 'helloWorld',      moduleId: 'helloWorld/index',       title: 'Hello World',           type: 'intro',      nav: true},
            { route: 'clickCounter',    moduleId: 'clickCounter/index',     title: 'Click Counter',         type: 'intro',      nav: true}
        ]}
   ])

我正在努力解决的部分是注册子路线，并在导航到它们时让它们正确评估。 (渲染菜单稍后会出现......)

// Load routes              router.map(routes.navRoutes).buildNavigationModel().mapUnknownRoutes(function(instruction)
{
    logger.logError('No Route Found', instruction.fragment, 'main', true);
});

// Try load child routes...
$.each(routes.navRoutes, function(index, parentRoute) {
     if (!parentRoute.childRoutes) {
                return;
            }

            var childRouter = router.createChildRouter()
                .makeRelative({
                    moduleId: parentRoute.moduleRootId,
                    fromParent: true // also tried false + non-splat routes...
                }).map(parentRoute.childRoutes).buildNavigationModel();
        });

我在渲染此导航时遇到了各种错误。尝试计算散列(来自未激活的父项或子项)时，主要是内部 router.js 错误 - 所以所有散列都已定义。

一旦我用它来映射导航，子路线似乎无法访问 - 它们只是加载主 splat 页面而不会出错。

所以我想知道我是否以正确的方式解决这个问题？ (预先注册所有子路由，目的是渲染一个 2 层菜单)。

我认为后备正在使用类似 Durandal 1.2 answer about subrouting 的东西，使用平面路由注册、自定义“isSameItem”函数和计算的可观察值的组合来呈现 2 层导航。

Answer 1

我希望我能帮到你一点。

您可以永久加载“子”路由器吗？

据我所知你不能(或者说没有简单的方法可以实现)。子路由器旨在为特定 View 提供子路由功能 - 您可以将它们视为 Durandal View 中的 Durandal 导航。如果我们检查 Durandal 页面上的示例代码，我们可以很容易地看到子路由生命周期与给定的 View 相关联。更重要的是，如果我们检查创建子路由的函数的代码，我们将看到它创建了新的路由器并且只存储对父路由器的引用 - 父路由器(在大多数情况下是主路由器)没有对其子路由器的引用

router.createChildRouter = function() {
            var childRouter = createRouter();
            childRouter.parent = router;
            return childRouter;
        }; 

如何在主路由器中实现多级路由？

我过去遇到过类似的问题，但使用的是旧版本的 Durandal。对于这个问题，我从头开始你给它做了一些修改 - 我摆脱了 splat 路由，因为它打算与子路由一起使用，而我的解决方案不会使用它们。

var routes = [
                {
                    route: ['', 'home'],
                    moduleId: 'viewmodels/home',
                    title: 'Validation test',
                    nav: true
                },
                {
                    route: 'knockout-samples',
                    moduleId: 'viewmodels/ko/index',
                    moduleRootId: 'viewmodels/ko', // Custom property to make child routes easier              
                    title: 'Knockout Samples',
                    nav: true,
                    hash: '#knockout-samples',
                    childRoutes: [
                        { route: 'simpleList', moduleId: 'simpleList', title: 'SimpleList',  nav: true, hash : 'simpleList' },
                        { route: 'clickCounter', moduleId: 'clickCounter', title: 'Click Counter', nav: true, hash : 'clickCounter' }
                    ]
                }
            ];

下一步是将这个用户友好的定义转换为路由表，可以轻松地在主路由器中注册。

$.each(routes, function(index, route) {
                if (route.childRoutes === undefined)
                    return
                $.each(route.childRoutes, function(index, childRoute) {
                    childRoute.route = route.route + '/' + childRoute.route;
                    childRoute.moduleId = route.moduleRootId + '/' + childRoute.moduleId;
                    childRoute.title = route.title + '/' + childRoute.title;
                    childRoute.hash = route.hash + '/' + childRoute.hash;
                    childRoute.parent = route.moduleRootId;
                });
                routes = routes.concat(route.childRoutes);
            });

最后一步是标准注册路由器并激活它。

return router.map(routes)
                .buildNavigationModel()
                .activate();

如何渲染寄存器路由以保留多级布局？

我的代码适用于 Bootstrap 2.3.0，并将多级菜单呈现为下拉按钮。当路线没有子路线(所以只是简单路线)并且没有父路线(它的第一级导航)时，将呈现为简单按钮。如果路线有子路线，则将其呈现为下拉按钮，并且将子路线添加到下拉列表中。

<div class="btn-group" data-bind="foreach: router.navigationModel">
            <!-- ko if: $data.childRoutes === undefined && $data.parent === undefined -->
                <a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
            <!-- /ko -->
            <!-- ko if: $data.childRoutes !== undefined -->
            <div class="btn-group btn-info">
                <a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
                <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"/>
                </button>
                <ul class="dropdown-menu" data-bind="foreach: childRoutes">
                    <a data-bind="css: { active: isActive }, attr: { href: hash }, text: title" class="btn btn-info" href="#"/>
                </ul>
            </div>
            <!-- /ko -->
        </div>

样式可能需要稍微打磨一下，但整体逻辑已经完成。