如何使用下拉菜单进行Durandal导航? [英] How to use dropdowns for Durandal navigation?

问题描述

我刚刚开始与Durandal一起工作，所有的东西都放到位，并且正在使用Hot Towel模板来加快处理速度.

I've just started working with Durandal and all the pieces are falling into place, and am using the Hot Towel template to speed things up.

让我感到困扰的一件事是如何创建一个比按钮组更复杂的分层导航系统.这就是我要结束的事情:

One thing that stumps me is how to create a more complex hierarchical navigation system than a buttongroup. Here's what I want to end up with:

A B C
A1 B1 C1
A2 B2 C2

A B C
A1 B1 C1
A2 B2 C2

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

A, B, and C are the top-level menus that have no routes attached to them - they are simply placeholders. I will have views and viewmodels for A1, A2, B1, B2, C1, and C2 and need those hash tags to be active links.

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

My best idea right now is to append the parent menu into each route's url and have code in nav.html that dynamically adds each node into the appropriate parent based on parsing the url. To be fully dynamic, it would add both the parent nodes and child nodes dynamically.

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

我已经使用Durandal搜索了很多分层导航示例，但是还没有看到任何东西.是否有最佳实践来将导航功能扩展到简单的一维列表之外?我是否忽略了路由器中的某些功能，而我却没有看到，因此我无需在视图名称中嵌入层次结构信息就可以做到这一点?

I have done a lot of searching for hierarchical navigation examples with Durandal but haven't seen anything yet. Is there a best practice out there for expanding the navigation functionality beyond the simple one-dimensional list? Am I overlooking some functionality in the router that I'm not seeing that would let me do this without embedding hierarchy information into the view names?

即使我对提出的任何一种解决方案都不满意，我也只是将答案标记为正确.当选择一个框架，以抽象的和独立的逻辑，表示和控制似乎傻重新开始合并这些结构只是为了提供比基本的导航外壳多.我已经将开发工作转移到了angularjs，在这种情况下，这样的事情变得更加直观并且可以保持分离.希望杜兰达尔能在不久的将来取得更大的进步，我一定会为以后的项目重新评估它.

I just marked an answer as correct, even though I wasn't happy with either solution presented. When selecting a framework to abstract and separate logic, presentation, and control it seems silly to start merging these constructs again just to provide more than a basic navigation shell. I have shifted my development efforts to angularjs where things like this become far more intuitive and can keep the separation. Hopefully Durandal can move forward a little more in the near future and I'll definitely re-evaluate it for future projects.

推荐答案

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

You could hard-code them into your shell view, but if you didn't want to do that you can do it this -

在您看来，使用/#做一个无效的锚，该锚不做任何事情，下拉a路由，另一个下拉b路由.

In your view, make a non-working anchor with /# that does nothing, with a drop down of a-routes, and another with a drop-down of b routes.

        <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>

在您的外壳视图模型中为路线计算一些可观察到的东西

Make some computed observables for the routes in your shell view model

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

This sets all your routes to false, and then gives them another attribute of aroute that is set to true. The computed filters down to only routes with that setting set to true.

这篇关于如何使用下拉菜单进行Durandal导航?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！