如何使用Durandal导航的下拉菜单？

Question

我刚刚开始与Durandal合作,所有的部件都落到了位置,我正在使用Hot Towel模板加快速度.

让我感到困惑的一件事是如何创建一个比buttongroup更复杂的分层导航系统.这就是我想要的结果:

ABC
A1 B1 C1
A2 B2 C2

A,B和C是没有附加路由的顶级菜单 - 它们只是占位符.我将为A1,A2,B1,B2,C1和C2提供视图和视图模型,并且需要将这些哈希标记作为活动链接.

我现在最好的想法是将父菜单附加到每个路径的url中,并在nav.html中使用代码,根据解析url将每个节点动态添加到相应的父节点中.要完全动态,它将动态添加父节点和子节点.

        {
          url: 'A_A1',
          moduleId: 'viewmodels/A_A1',
          name: 'A1',
          visible: true
        }

我已经用Durandal搜索了很多层次导航示例,但还没有看到任何东西.有没有最佳实践可以将导航功能扩展到简单的一维列表之外？我是否忽略了路由器中的一些功能,我没有看到,如果不将层次结构信息嵌入到视图名称中,我会这样做？

编辑:我只是将答案标记为正确,即使我对提出的任何解决方案都不满意.当选择一个框架来抽象和分离逻辑,表示和控制时,再次开始合并这些结构只是为了提供更多的基本导航shell似乎很愚蠢.我已经将我的开发工作转移到了angularjs,这样的事情变得更加直观并且可以保持分离.希望Durandal能够在不久的将来向前推进一步,我肯定会为未来的项目重新评估它.

Answer 1

您可以将它们硬编码到shell视图中,但如果您不想这样做,您可以这样做 -

在您的视图中,使用/#创建一个不工作的锚点,其中不执行任何操作,下拉a-routes,另一个使用b路由下拉列表.

        <div class="nav-collapse collapse main-nav">
            <div class="btn-group">
                <a class="btn" href="/#">
                    <span class="text">A Routes</span> </a>
                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu pull-right">
                        <!-- ko foreach: aRoutes -->
                        <li data-bind="css: { active: isActive }">
                            <a data-bind="attr: { href: hash }, html: name"></a>
                        </li>
                        <!-- /ko -->
                    </ul>
            </div>
            <div class="btn-group">
                <a class="btn" href="/#">
                    <span class="text">B Routes</span> </a>
                <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                    <ul class="dropdown-menu pull-right">
                        <!-- ko foreach: bRoutes -->
                        <li data-bind="css: { active: isActive }">
                            <a data-bind="attr: { href: hash }, html: name"></a>
                        </li>
                        <!-- /ko -->
                    </ul>
            </div>
      </div>

为shell视图模型中的路径创建一些计算的observable

    var aRoutes = ko.computed(function () {
        return router.allRoutes().filter(function (r) {
            return r.settings.aroute;
        });
    });

    var bRoutes = ko.computed(function () {
        return router.allRoutes().filter(function (r) {
            return r.settings.broute;
        });
    });

并在您的路线定义中 -

 {
     url: 'a1',
     moduleId: 'viewmodels/a1',
     name: 'A1',
     visible: false,
     settings: {aroute: true}
 },

这会将您的所有路由设置为false,然后为它们提供另一个设置为true的路由属性.计算过滤器仅限于将该设置设置为true的路由.