knockout.js - 如何使用下拉菜单进行 Durandal 导航？

Question

我刚刚开始与 Durandal 合作，所有的部分都已经到位，并且正在使用 Hot Towel 模板来加快速度。

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

甲乙丙
A1 B1 C1
A2 B2 C2

A、B 和 C 是没有附加路线的顶级菜单 - 它们只是占位符。我将拥有 A1、A2、B1、B2、C1 和 C2 的 View 和 View 模型，并且需要将这些哈希标记作为事件链接。

我现在最好的想法是将父菜单附加到每个路由的 url 中，并在 nav.html 中有代码，根据解析 url 将每个节点动态添加到适当的父级中。为了完全动态，它将动态添加父节点和子节点。

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

我已经用 Durandal 搜索了很多分层导航示例，但还没有看到任何东西。是否有将导航功能扩展到简单的一维列表之外的最佳实践？我是否忽略了路由器中的一些我没有看到的功能，这些功能可以让我在不将层次结构信息嵌入 View 名称的情况下执行此操作？

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

Answer 1

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

在您看来，使用/# 创建一个不工作的 anchor ，它什么都不做，下拉 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 View 模型中的路由创建一些计算的 observables

    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 的 aroute 的另一个属性。计算出的过滤器只过滤设置为 true 的路由。