Aurelia路由器-带有下拉菜单的导航栏

问题描述

假设我们有bootstrap 3导航栏，并且模板的一部分可能看起来像这样:

Let's say we have bootstrap 3 navbar, and part of the template could look like this:

<ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
    </li>
</ul>

这也是Aurelia的示例文档.

This is also example from Aurelia docs.

现在让我们说，我想添加一个带下拉菜单的项:

Now let's say, I'd like to add one item with dropdown:

<ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href.bind="row.href">${row.title}</a>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Some page</a></li>
            <li><a href="#">Some other page</a></li>
        </ul>
    </li>
</ul>

如何为该下拉菜单配置路由?我需要第二台路由器吗?子路由器?

How can I configure routes for this dropdown?Do I need second router? Child router?

推荐答案

您不必使用nav属性

以我的经验，nav属性充其量是一个很好的概念证明.实际上，大多数应用程序具有更复杂的菜单，并且更适合于其后的更复杂的数据结构.

You don't have to use the nav property

In my experience, the nav property is at best a nice proof of concept. In practice, most applications have more complicated menus, and are better suited to more complex data structures behind them.

对于不太复杂的情况，尤其是定义明确的应用程序，它们不太可能接收更多复杂的路由，只需将它们硬编码到视图中即可.

For not-too-complex situations, especially well defined applications that are unlikely to receive more, complicated routes, just hard code them into the view.

<ul class="nav navbar-nav">
  <li>
    <a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" href="#/first">
      First
    </a>
  </li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#/sub-one">Sub Item 1</a></li>
      <li><a href="#/sub-two">Sub Item 2</a></li>
    </ul>
  </li>
</ul>

此策略将丢失所有有趣的，令人眼花A乱的Aurelia启用的数据绑定.但这可以节省您的时间.它简单明了，没有漏洞的余地.这只是HTML.主要缺点是，这需要为isActive属性添加一些额外的编码，但是编写此代码比尝试编写动态的嵌套菜单要容易得多.

This strategy loses all of the fun, flashy Aurelia-enabled data-binding. But it might save you hours. It is simple and straightforward, and leaves no room for bugs. It's just HTML. The major downside as that this requires a little bit of additional coding for the isActive property, but its significantly easier to write this code than to try to write a dynamic, nested menu.

对于更复杂，动态的情况，尤其是当您不知道在运行时期望什么时，我建议创建自己的类或描述菜单的接口.

For more complex, dynamic situations, especially when you have little idea what to expect at runtime, I recommend creating your own class or interface that describes your menu.

models/menuItem.ts

export interface MenuItem {
    title: string;
    route?: string | string[];
    children?: MenuItem[];
}

app.ts

const MENU = [{
    title: 'First',
    route: '#/first'
},{
    title: 'Menu',
    children: [{
        title: 'Sub Item 1',
        route: 'sub-one',
    },{
        title: 'Sub Item 2',
        route: '#/sub-two'
    }]
}];

这要复杂得多，但是却为您提供了默认路由器navModel所没有的大量可定制性和灵活性.

This is quite a bit more complicated, but affords you a great deal of customizability and flexibility that the default router navModel does not.

这篇关于Aurelia路由器-带有下拉菜单的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！