如何使用路由器和 inbuilt/custom 属性在 aurelia 中创建下拉菜单？

Question

Twitter bootstrap 有一个下拉菜单选项；菜单有多层的地方。参见：http://getbootstrap.com/javascript/#dropdowns

我如何使用 Aurelia.js 的路由器重新创建它？路由器通常提供 1 级。我需要 2 个级别。

Answer 1

功劳归功于：https://github.com/adarshpastakia。

我"borrowed"这个人的大部分代码都能回答这个问题。您可以在以下位置找到它：https://gist.github.com/adarshpastakia/5d8462b5bc8d958d5cb3

以下是回答上述问题的步骤：
(1)在路由器中，添加一个"settings"属性。它可以是任何你想要的。这是一个例子：
settings:{ subMenu:[ {href:'#/sub1', title:'Submenu 1'}, {href:'zoldello.wordpress.com', title:'Submenu 2'}, {href:'#/sub3', title:'Submenu 3'} ] }

注意：（a）它必须被称为"settings"（b）Aurelia目前忽略你在"settings"之外编写的自定义代码（c）在"settings"中，你可以放置任何属性里面有你喜欢的

(2)
(a) 从上面的 (1) 开始，如果您需要子菜单路由到页面的一部分，请在 href（或任何您称呼的）中使用“#sub1”；其中 "sub1" 指的是 nav 设置为 false 的不同路线。
(b) 如果您想要一个独立于路由的超链接，请将 href（或任何您称之为的名称）设置为您想要的 url（我在我的示例中使用了 "zoldello.wordpress.com"）。无需添加额外的路线

(3) 遵循构建 DOM 的基本 aurelia 规则（重复、模板等）

这是一个例子：

HTML 文件

<li repeat.for="route of router.navigation">
  <!-- if route has no submenu -->
  <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a>

  <!-- if route has submenu -->
  <a href.bind="javascript:;" class="dropdown-toggle" data-toggle="dropdown" 
  role="button" aria-haspopup="true" aria-expanded="false" if.bind="route.settings.subMenu">
  ${route.title} <span class="caret"></span></a>

  <ul if.bind="route.settings.subMenu">
    <li repeat.for="menu of route.settings.subMenu">
      <a href.bind="menu.href">${menu.title}</a>
    </li>
  </ul>
</li>

Javascript 文件

configureRouter(config) {
  config.map([{
    route:'home',
    title:'Home',
    nav:true,
    module:'home'
  },{
    route:'top-menu',
    title:'Top Menu',
    nav:true,
    settings:{
      subMenu:[
        {href:'#/sub1', title:'Submenu 1'},
        {href:'zoldello.wordpress.com', title:'Submenu 2'},
        {href:'#/sub3', title:'Submenu 3'}
      ]
    }
  }, {
    route:'sub1',
    title:'Submenu 1',
    nav:false,
    moduleId:'module'
  }, {
    route:'sub2',
    title:'Submenu 2',
    nav:false,
    moduleId:'module'
  }, {
    route:'sub3',
    title:'Submenu 3',
    nav:false,
    moduleId:'module'
  }])
}

Answer 2

菲尔回答的小修正

html:

<li class=" ${route.settings.subMenu ? '' : 'dropdown'} " repeat.for="route of router.navigation">
                <!-- if route has no submenu -->
                <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a>

                <!-- if route has submenu -->
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" if.bind="route.settings.subMenu">
                    ${route.title} <span class="caret"></span>
                </a>

                <ul class="dropdown-menu" if.bind="route.settings.subMenu">
                    <li repeat.for="menu of route.settings.subMenu">
                        <a href.bind="menu.href">${menu.title}</a>
                    </li>
                </ul>
            </li>

js

configureRouter(config) { config.map([{
route:'home',
title:'Home',
nav:true,
moduleid:'home'  },{
route:'top-menu',
title:'Top Menu',
nav:true,
moduleid:'module'
settings:{
  subMenu:[
    {href:'#/sub1', title:'Submenu 1'},
    {href:'zoldello.wordpress.com', title:'Submenu 2'},
    {href:'#/sub3', title:'Submenu 3'}
  ]
} }, {
route:'sub1',
title:'Submenu 1',
nav:false,
moduleId:'module'  }, {
route:'sub2',
title:'Submenu 2',
nav:false,
moduleId:'module'  }, {
route:'sub3',
title:'Submenu 3',
nav:false,
moduleId:'module'  }])}

Answer 3

我登陆这里时也在寻找同样的东西。上面的答案很有帮助，但没有达到我需要的程度。我了解了 Bootstrap 3 dropdown sub menu missing 和那里提供的解决方法，但又需要更多东西。然后我发现 http://www.smartmenus.org/ 它在我们的生产应用程序的 Aurelia 下拉菜单中提供了我需要的响应能力和功能。我与他们的团队合作，获得了一个运行良好的骨架应用程序版本。您可以在 http://www.smartmenus.org/files/demos/aurelia/SmartMenusDemo.zip.

下载

app.ts 文件与上面的示例类似，但增加了对超赞字体图标的支持：

import {RouterConfiguration, Router} from 'aurelia-router';
import 'jquery';
import 'bootstrap';
import 'smartmenus';
import 'smartmenus-bootstrap';

export class App {
    router: Router;

    configureRouter(config: RouterConfiguration, router: Router) {
        config.title = 'Aurelia';
        config.map([
            { route: ['', 'welcome'], name: 'welcome', moduleId: './welcome', nav: true, title: 'Welcome' },
            {
                route: 'users', name: 'users', moduleId: './users', nav: true, title: 'Show Users',
                settings: {
                    subMenu: [{ href: '#/users', title: 'Users', iconClass: 'fa fa-slideshare' },
                        { href: '#/usersTest', title: 'Test Users', iconClass: 'fa fa-street-view' },
                                {
                                    href: '#', title: 'Sub Sub', iconClass: 'fa fa-medium', settings: {
                                        subMenu: [{ href: '#/child-router', title: 'Child Router', iconClass: 'fa fa-registered' },
                                            { href: '#/usersTest', title: 'Test Users', iconClass: 'fa fa-street-view' }]
                                    }
                                },
                                { href: '#/child-router', title: 'Child Router', iconClass: 'fa fa-registered' }]
                }
            },
            { route: 'usersTest', name: 'usersTest', moduleId: './usersTest', nav: false, title: 'Test Users' },
            { route: 'child-router', name: 'childRouter', moduleId: 'child-router', nav: false, title: 'Child Router' },
            { route: 'users', name: 'users', moduleId: './users', nav: true, title: 'Github Users' }
        ]);

        this.router = router;
    }

    attached(): void {
        $.SmartMenus.Bootstrap.init();
    }

}

我在导航中实现了对 4 级子菜单的支持-bar.html:

<template bindable="router">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-level-nav">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <i class="fa fa-home"></i>
                <span>${router.title}</span>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="top-level-nav">
            <ul id="main-menu" class="nav navbar-nav ">
                <li repeat.for="route of router.navigation" class="${row.isActive ? 'active' : ''} ${route.settings.subMenu ? 'dropdown' : ''}">
                    <!-- if route has no submenu -->
                    <a href.bind="route.href" if.bind="!route.settings.subMenu">${route.title}</a>

                    <!-- if route has submenu -->
                    <a if.bind="route.settings.subMenu" class="dropdown-toggle" data-toggle="dropdown"
                       role="button" aria-haspopup="true" aria-expanded="true">
                        ${route.title} <span class="caret"></span>
                    </a>
                    <ul if.bind="route.settings.subMenu" class="dropdown-menu">
                        <li repeat.for="l2SubMenu of route.settings.subMenu">
                            <a href.bind="l2SubMenu.href" if.bind="!l2SubMenu.settings.subMenu"><span class.bind="l2SubMenu.iconClass"> </span>&nbsp&nbsp${l2SubMenu.title}</a>
                            <a href.bind="l2SubMenu.href" if.bind="l2SubMenu.settings.subMenu" class="dropdown-toggle" data-toggle="dropdown"
                               role="button" aria-haspopup="true" aria-expanded="true">
                                <span class.bind="l2SubMenu.iconClass"> </span>&nbsp&nbsp${l2SubMenu.title} <span class="caret"></span>
                            </a>
                            <ul if.bind="l2SubMenu.settings.subMenu" class="dropdown-menu">
                                <li repeat.for="l3SubMenu of l2SubMenu.settings.subMenu">
                                    <a href.bind="l3SubMenu.href" if.bind="!l3SubMenu.settings.subMenu"><span class.bind="l3SubMenu.iconClass"> </span>&nbsp&nbsp${l3SubMenu.title}</a>
                                    <a href.bind="l3SubMenu.href" if.bind="l3SubMenu.settings.subMenu" class="dropdown-toggle" data-toggle="dropdown"
                                       role="button" aria-haspopup="true" aria-expanded="true">
                                        <span class.bind="l3SubMenu.iconClass"> </span>
                                        &nbsp&nbsp${l3SubMenu.title} <span class="caret"></span>
                                    </a>
                                    <ul if.bind="l3SubMenu.settings.subMenu" class="dropdown-menu">
                                        <li repeat.for="l4SubMenu of l3SubMenu.settings.subMenu">
                                            <a href.bind="l4SubMenu.href"><span class.bind="l4SubMenu.iconClass"> </span>&nbsp&nbsp${l4SubMenu.title}</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="loader" if.bind="router.isNavigating">
                    <i class="fa fa-spinner fa-spin fa-2x"></i>
                </li>
            </ul>
        </div>
    </nav>
</template>

如您所见，SmartMenus 不需要对应用程序进行太多更改，但无论 Bootstrap对此的贬值支持。

希望这对某人有所帮助！

如何使用路由器和 inbuilt/custom 属性在 aurelia 中创建下拉菜单？

How do I use a router and inbuilt/custom attributes to create dropdown menu in aurelia?

javascript

mvvm

drop-down-menu

aurelia