[英]How do I use a router and inbuilt/custom attributes to create dropdown menu in aurelia?
Twitter bootstrap has a dropdown menu option; Twitter引导程序具有下拉菜单选项; where a menu has have multiple layers.
菜单有多层的地方。 See: http://getbootstrap.com/javascript/#dropdowns
请参阅: http : //getbootstrap.com/javascript/#dropdowns
How can I use Aurelia.js's routers to recreate this? 如何使用Aurelia.js的路由器来重新创建它? Routers normally provide 1 level.
路由器通常提供1级。 I need 2 levels.
我需要2个等级。
Credit for this goes to: https://github.com/adarshpastakia . 值得一提的是: https : //github.com/adarshpastakia 。
I "borrowed" most of this person's code to answer this question. 我“借用”了这个人的大部分代码来回答这个问题。 You can find it at: https://gist.github.com/adarshpastakia/5d8462b5bc8d958d5cb3
您可以在以下位置找到它: https : //gist.github.com/adarshpastakia/5d8462b5bc8d958d5cb3
Here are steps to answer the question above: 以下是回答上述问题的步骤:
(1) In the router, add a "settings" property. (1)在路由器中,添加“设置”属性。 It can be whatever you want.
它可以是任何您想要的。 Here is an example:
这是一个例子:
settings:{ subMenu:[ {href:'#/sub1', title:'Submenu 1'}, {href:'zoldello.wordpress.com', title:'Submenu 2'}, {href:'#/sub3', title:'Submenu 3'} ] }
Note: (a)It must be called "settings" (b) Aurelia currently ignores custom code you write outside "settings" (c)In "settings", you can place any property in it you like 注意:(a)必须称为“设置”(b)Aurelia当前忽略您在“设置”之外编写的自定义代码(c)在“设置”中,您可以将任何属性放入其中
(2) (2)
(a) From (1) above, if you need the submenu to route to a part of the page, in href (or whatever you call it) use "#sub1"; (a)从上面的(1),如果您需要子菜单路由到页面的一部分,则在href(或任何您称呼的名字)中使用“#sub1”; where "sub1" refers to a different route where nav is set to false.
其中“ sub1”指的是nav设置为false的另一条路由。
(b) If you want a hyperlink independent of routing, set href (or whatever you call it) to the url you desire (I used "zoldello.wordpress.com" in my example). (b)如果您想要一个与路由无关的超链接,请将href(或任何您称呼的)设置为所需的URL(在我的示例中,我使用了“ zoldello.wordpress.com”)。 No need to add a additional route
无需添加其他路线
(3) Follow the basic aurelia rules of building DOM (repeat, template etc) (3)遵循构建DOM的基本aurelia规则(重复,模板等)
Here is an example: 这是一个例子:
HTML file 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 file 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'
}])
}
small fix for Phil's answer 菲尔答案的小解决方案
html: 的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 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' }])}
I was looking for the same thing when I landed here. 当我降落在这里时,我一直在寻找相同的东西。 The above answers where helpful but didn't take me as far as I needed to go.
上面的答案很有帮助,但没有带我走那么远。 I learned of Bootstrap 3 dropdown sub menu missing and the work-arounds offered there but again needed something more.
我了解到缺少Bootstrap 3下拉子菜单,并且那里提供了解决方法,但再次需要更多操作。 Then I found http://www.smartmenus.org/ which provides the responsiveness and functionality I need in a drop-down menu for Aurelia for our production app.
然后,我在用于生产应用程序的Aurelia的下拉菜单中找到了http://www.smartmenus.org/ ,它提供了我所需的响应能力和功能。 I worked with their team to get a version of the skeleton app that works well.
我与他们的团队合作,获得了运行良好的骨架应用程序版本。 You can download it at http://www.smartmenus.org/files/demos/aurelia/SmartMenusDemo.zip .
您可以从http://www.smartmenus.org/files/demos/aurelia/SmartMenusDemo.zip下载。
The app.ts file is similar to the example above but adds support for font-awesome icons: 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();
}
}
I implemented support for 4 levels of sub-menus in nav-bar.html: 我在nav-bar.html中实现了对4级子菜单的支持:
<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>  ${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>  ${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>  ${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>
  ${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>  ${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>
As you can see, SmartMenus didn't require much change to the app but provides us with great responsive multi-level drop down menus in Aurelia with the power of Bootstrap regardless of Bootstrap depreciating support for that. 如您所见,SmartMenus不需要对应用程序进行太多更改,但是无论Bootstrap贬值对它的支持如何,SmartMenus在Aurelia中为我们提供了具有Bootstrap功能的出色的响应式多级下拉菜单。
Hope this helps someone ! 希望这对某人有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.