javascript - Aurelia:创建嵌套/多级导航菜单的简单方法

Question

我需要创建一个多级导航菜单。菜单的内容因用户而异。我计划通过将数据作为 JSON 返回的服务来拉取可以包含子项数组的导航项集合。我见过的每个导航/路由示例都使用静态路由或单级菜单。我已经阅读了一些关于子路由的内容，但这似乎不是我所需要的。我唯一能想到的是创建一个自定义导航元素，该元素的模型将使用导航项集合中的数据在普通数组中注册路由。然后我会使用这个集合来呈现 HTML，而不是使用路由器，因为它包含分层信息。有没有更简单的方法来做到这一点。这是我使用的第一个 JS 框架，所以我正在努力跟上速度。

Answer 1

实际上，这很容易。您只需向路由的 settings 对象添加一个属性。您可以随意命名。它将具有子菜单的菜单项集合。只需使用它来构建子菜单。

这是一个例子:https://gist.run?id=beb5ba9155fdb2ccefcf78676879b1ca

app.html

<template>
  <ul>
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
      <a href.bind="row.href">${row.title}</a>
      <ul>
        <li repeat.for="sub of row.settings.subRoutes">
          <a route-href="route.bind: row.config.name; params.bind: sub.params">${sub.name}</a>
        </li>
      </ul>
    </li>
  </ul>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

app.js

import {activationStrategy} from 'aurelia-router';

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    config.map([
      { 
        route: ['', 'one'], 
        name: 'one',      
        moduleId: 'one',      
        nav: true, 
        title: 'Page 1',
        activationStrategy: activationStrategy.invokeLifecycle,
        settings: {
          subRoutes: [
            {
              name: 'Sub-choice 1',
              params: {
                'foo': 'bar'
              }
            },
            {
              name: 'Sub-choice 2',
              params: {
                'foo': 'two'
              }
            }
          ]
        }
      },
      { route: 'two',         name: 'two',        moduleId: 'two',        nav: true, title: 'Page 2' }
    ]);

    this.router = router;
  } 
}

one.html

<template>
  Page One<br />
  Params:<br />
  <pre><code>${params}</code></pre>
</template>

one.js

export class One {
  activate(params) {
    this.params = JSON.stringify(params);
  }
}

你传递的参数可以是任何你喜欢的。例如，它们可能是关于应该在您要去的路线上的子路由器上激活什么路线的信息。您可以在页面的激活方法中调用 router.navigate...(下例中的 one.js)以导航到子路由器上的正确路由。你真的可以做任何你想做的事，因为你可以把你喜欢的任何旧东西放在那个设置对象上。