Aurelia router - навигационная панель с выпадающими списками

Question

Допустим, у нас есть загрузчик 3 navbar, и часть шаблона может выглядеть так:

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

Допустим, я бы хотел добавить один элемент с выпадающим списком:

<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 не.

Answer 2

Одним из вариантов будет создание свойства пользовательских настроек в конфигурации маршрутизатора, а затем отфильтровать элементы навигации по мере необходимости. Примечание: это кажется немного хакерским и могут быть другие альтернативы, но это то, что я могу придумать.

метод configRouter

// the first 2 items will show up in the navigation.
// the last 2 items will only show up in the drop down navigation.
config.map([
        {
            route: ["", "home"],
            name: "home",
            moduleId: "home/index",
            title: "Home",
            nav: true
        },
        {
            route: "about-me",
            moduleId: "about/about",
            title: "About",
            nav: true
        },
        {
            route: "some-page",
            moduleId: "some/page",
            title: "Some Page",
            nav: true,
            settings: {dropdown: true}
        },
        {
            route: "some-other-page",
            moduleId: "some/otherPage",
            title: "Some other Page",
            nav: true,
            settings: {dropdown: true}
        }
    ]);

Панель навигации

<!-- 
    Note the use of if.bind="!nav.settings.dropdown" in the first repeat.for.
    Note the use of if.bind="nav.settings.dropdown" in the drop down repeat.for.
-->
<ul class="nav navbar-nav">
    <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a if.bind="!nav.settings.dropdown" 
            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 repeat.for="nav of router.navigation" class.bind="nav.isActive ? 'active' :''">
                <a if.bind="nav.settings.dropdown"
                    href.bind="nav.href">${nav.title}</a>
             </li>
        </ul>
    </li>
</ul>