Aurelia：创建嵌套/多级导航菜单的简便方法 [英] Aurelia: Easy way to create nested/multi level navigation menu

问题描述

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

I need to create a multilevel navigation menu. The contents of the menu vary depending on the user. I plan on pulling the collection of navigation items that can contain an array of child items via a service that will return the data as JSON. Every example of navigation/routing I've seen uses static routes or single level menus. I have read a bit about child routing but that does not seem to be what I need. The only thing I can think of is to create a custom navigation element who's model will register the routes in a plain array using the data in the navigation items collection. I would then use this collection to render the HTML instead of using router as it contains the hierarchical information. Is there an easier way to do this. This is the first JS framework I have worked with so I'm trying to get up to speed.

推荐答案

这很容易，实际上。您只需在路径的设置对象中添加属性即可。您可以随意命名。它将为子菜单提供一系列菜单项。只需使用它来构建子菜单。

This is fairly easy, actually. You'll just add a property to the route's settings object. You can name it whatever you want. It'll have a collection of menu items for the sub menu. Just use that to build the sub-menu.

以下是一个例子： https：// gist.run?id=beb5ba9155fdb2ccefcf78676879b1ca

Here's an example: 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);
  }
}

您传递的参数可以是您喜欢的任何参数。例如，它们可能是关于应该在您要去的路线上的子路由器上激活的路线的信息。您可以在页面的activate方法中调用 router.navigate ... （ one.js ，如下例所示）导航到子路由器上的正确路由。你真的可以随心所欲，因为你可以在设置对象上放置任何旧的东西。

The parameters you pass can be anything you like. For example, they could be the information on what route the should be activated on a child router on the route you're going to. You could call router.navigate... in the activate method of the page (one.js in the example below) to navigate to the correct route on the child router. You really can do whatever you want, since you can put any old thing you'd like on that settings object.

这篇关于Aurelia：创建嵌套/多级导航菜单的简便方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！