Aurelia и несколько уровней навигации

Я создаю приложение Aurelia, и у меня есть верхняя навигация для моего приложения, созданная с использованием маршрутизатора для навигации высокого уровня. Мне также нужна отдельная боковая навигация для разных разделов моего приложения (для каждого каталога).

Например, у меня есть раздел пользователей на сайте, в котором будет несколько страниц (представления и модели представлений) для различных функций, и мне нужно, чтобы этот раздел пользователей имел собственную боковую навигацию. Я хотел бы иметь отдельный маршрутизатор и боковую панель навигации для каждого раздела. В руководстве по началу работы показан сценарий дочернего маршрутизатора, но только на данной странице.

Я бы хотел, чтобы структура моего приложения выглядела примерно так:

+src
    +users
      - home.js
      - home.html
      - users-nav-bar.html (this is what I'm unsure how set up)
      - users-nav-bar.js
      - users-router.js (not sure if this is possible)
      - user-profile.html
      - user-profile.js
      - user-roles.html
      - user-roles.js
    +cases
      - case-nav-bar.html
      - case-nav-bar.js
      etc...

Возможно ли это с Аурелией? Есть ли другой/лучший способ структурировать боковую панель навигации для каждого раздела приложения? Может ли кто-нибудь указать мне пример?


aurelia
person Don Fitz    schedule 09.12.2015    source источник
comment
Да, это возможно! Это одна из особенностей архитектуры веб-компонентов.   -  person Fabio Luz    schedule 09.12.2015
comment
Знаете ли вы какие-либо примеры того, как настроить маршрутизацию и навигацию таким образом?   -  person Don Fitz    schedule 09.12.2015
comment
Я не знаю ни одного примера. Покажите нам, что вы пробовали до сих пор, может быть, кто-нибудь может дать вам свет   -  person Fabio Luz    schedule 09.12.2015
comment
Хорошо. Все равно собираем.   -  person Don Fitz    schedule 09.12.2015
comment
У меня ничего не работает.   -  person Don Fitz    schedule 10.12.2015

Ответы (1)


arrow_upward
1
arrow_downward

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

//profile.js

export class Profile {

//Business logic related stuff, interact with services, etc
//then
configureRouter(config, router){
    config.map([
        {
            route:["","about-me"] , 
            moduleId:"profile/about-me", 
            title: "About Me",
            name : "about-me",
            nav:true
        },

        {
            route:"my-travels", 
            moduleId:"profile/my-travels", 
            title: "My Travels",
            name :"my-travels",
            nav:true
        },

    ]);
    this.router = router;
}

}

//profile.html
<div class="panel panel-body">
    <div class="wizard text-center">
        <a repeat.for="row of router.navigation"
           class="${row.isActive ? 'active' : ''}"
           href.bind="row.href">${row.title}</a>
    </div>
    <router-view></router-view>
</div>

Поэтому, не видя кода, я могу только предложить варианты.

Не беспокойтесь о том, что у каждого дочернего раздела должна быть отдельная панель навигации и класс маршрутизатора. например, пользователи-навигатор и пользователи-маршрутизатор мне не кажутся правильными (опять же, я предполагаю, не видя кода), но если у вас есть только пользователи.html и и пользователи.js, вы можете включить свою модель представления логика И информация о маршрутизаторе в файле users.js. Затем все, что делает user.html, — это перебирает настроенные маршруты и отображает меню навигации. Поэтому, если пользователь не нажмет на ссылку, которая приведет его на страницу пользователя, это меню навигации не будет видно.

person freud    schedule 09.12.2015
comment
Спасибо за это. Мое представление о том, как работает дочерняя навигация, было просто неверным. Спасибо, что прояснили это. - person Don Fitz; 10.12.2015