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

Question

假设我们有bootstrap 3导航栏,模板的一部分可能如下所示:

<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 docs的例子.

现在让我们说,我想添加一个带下拉列表的项目:

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

如何为此下拉列表配置路由？我需要第二个路由器吗？儿童路由器？

Answer 1

您不必使用该nav属性

根据我的经验,该nav物业充其量只是一个很好的概念证明.实际上,大多数应用程序都有更复杂的菜单,更适合于它们背后更复杂的数据结构.

策略1:硬编码菜单

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

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

这种策略失去了所有有趣的,华丽的Aurelia数据绑定.但它可能会节省你的时间.它简单明了,不会留下任何漏洞.它只是HTML.这个主要的缺点是需要对该isActive属性进行一些额外的编码,但是编写此代码比尝试编写动态嵌套菜单要容易得多.

策略2:创建自定义菜单模型

对于更复杂,动态的情况,特别是当您不知道在运行时期望什么时,我建议您创建自己的类或界面来描述您的菜单.

车型/ 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没有.