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

我刚刚开始与 Durandal 合作，所有部分都已就位，并且正在使用热毛巾模板来加快速度。

让我困惑的一件事是如何创建比按钮组更复杂的分层导航系统。这就是我想要的结果：

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 搜索了很多分层导航示例，但还没有看到任何内容。是否有最佳实践可以将导航功能扩展到简单的一维列表之外？我是否忽略了路由器中的一些我没有看到的功能，这些功能可以让我在不将层次结构信息嵌入到视图名称中的情况下执行此操作？

编辑：我只是将答案标记为正确，尽管我对所提出的任何解决方案都不满意。当选择一个框架来抽象和分离逻辑、表示和控制时，仅仅为了提供比基本导航外壳更多的内容而再次开始合并这些结构似乎很愚蠢。我已将我的开发工作转移到 AngularJS，这样的事情变得更加直观并且可以保持分离。希望 Durandal 在不久的将来能够取得更大的进步，我一定会在未来的项目中重新评估它。

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

在您看来，使用 /# 创建一个不执行任何操作的非工作锚点，其中包含 a 路由下拉列表，另一个包含 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 视图模型中的路线创建一些计算可观察量

    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 的路由。