Добро пожаловать в часть 5 этой серии обзоров курса Pluralsight Основы Аурелии Брайана Нойеса.
Брайан является техническим директором и архитектором в Solliance, экспертной компании по разработке технологических решений.
Брайан — региональный директор Microsoft и MVP, он специализируется на многофункциональных клиентских технологиях, а также на создании поддерживающих их сервисов с помощью WCF и веб-API ASP.NET.
Вы можете следить за Брайаном через его блог на http://briannoyes.net.
Также в этой серии:
Часть 4 — Использование зависимого впрыска
Обзор маршрутизации
Традиционная навигация в веб-приложении перемещается с одной страницы на другую по мере того, как запросы GET отправляются на сервер, а сервер отправляет HTML для новой страницы.
В одностраничном приложении запрос GET по-прежнему выполняется для данной страницы, но страница содержит все приложение.
Существует механизм на стороне клиента для обмена представлениями, который называется маршрутизацией.
Приложения MVVM обычно представляют собой иерархию представлений и моделей представления. Хорошая система маршрутизации позволяет нам рассматривать любой из них как контейнер для навигации, и маршрутизатор Aurelia делает именно это.
Определение и настройка маршрутов
- Определите маршрутизацию контейнера с помощью ‹router-view›
- Реализовать configureRouter() в ViewModel
- Определить модули для маршрутов
Свойства маршрута для изучения:
- маршрут
- идентификатор модуля
- заглавие
- название
- навигация
- href
- viewPorts
В этом уроке Брайан описывает все эти свойства, кроме viewPorts, которые рассматриваются в следующем модуле.
Удаление ненужных ViewModels
В этом уроке повторно рассматривается код, написанный в модуле Реализация MVVM.
Event.js удаляется, а шаблон Events.html обновляется, чтобы указывать на представление Event.html, а не на удаленную ViewModel.
Это демонстрирует, что нам не всегда нужно иметь ViewModel.
Определение и использование основных маршрутов
По соглашению маршрутизатор ищет в каждой ViewModel метод с именем configureRouter.
configureRouter принимает два аргумента объекта config и router.
Брайан добавляет код для определения объекта конфигурации. Карта содержит только маршрут и moduleId, что является минимально необходимым.
В shell.html он заменяет элемент compose элементом ‹router-view›. Это работает так же, как и раньше.
Также см. шпаргалку Aurelia примеры маршрутизации.
Маршрутизация к нескольким представлениям и динамическое создание навигационных меню
В этом уроке мы добавим модуль обсуждения и модуль доски объявлений, определив дополнительные маршруты.
В config.map мы добавляем имя, заголовок и навигацию. Мы также создаем новые маршруты для работы и обсуждений.
Также пришло время организовать нашу файловую структуру: мы создаем новые каталоги для обсуждений, событий, вакансий и спонсоров. После перемещения Views и ViewModels в эти каталоги мы получаем ошибки. Для этого требуется несколько обновлений пути к файлу в shell.html, events.html и events.js.
Определив новые маршруты, мы можем заменить статические элементы списка гиперссылок для вакансий и обсуждений одним элементом списка с привязкой к данным, который использует repeat.for.
Теперь мы можем щелкнуть «Вакансии», чтобы увидеть страницу «Вакансии», и «Обсуждение» для страницы «Обсуждение», а кнопки «Назад» и «Вперед» по-прежнему работают правильно.
Создание уровня клиентских служб приложения
Брайан добавляет EventsData.js, в котором переменная EventData определяется как массив данных о событиях. Каждый элемент в этом массиве содержит идентификатор, описание, дату и время, заголовок, динамик и изображение.
Также в проект добавлены все изображения динамиков и новый сервис dataRepository.js.
Брайан говорит, что дата и время в JavaScript неприятны, и рекомендует библиотеку moment.js. Я регулярно использую момент в своих проектах и подтверждаю это.
Также рекомендую посмотреть курс Date and Time Fundamentals. Для получения дополнительной информации см. 10 лучших курсов Pluralsight.
Брайан добавляет метод getEvents, который использует обещание для получения данных Events. Events.js обновлен для использования нашего нового dataRepository.getEvents
Теперь у нас есть динамически загружаемые данные для десятков событий.
Передача и использование параметров в маршрутизации
Существует два способа кодирования параметров маршрутизации:
- URL-параметры
- Параметры строки запроса
Существует несколько способов использования маршрутов в наших ViewModels:
- Реализовать метод активации в ViewModel
- Создание URL-адресов с помощью метода router.generate
- Программно перейдите к другому маршруту с помощью router.navigate или router.navigateToRoute.
Использование параметров URL
Брайан добавляет новый маршрут в eventDetail в shell.js и создает шаблон в eventDetail.html.
Aurelia поддерживает pushstate. Дуэйн Чаррингтон написал статью Как заставить Аурелию работать с HTML5 pushState со всеми подробностями по этому поводу.
Состояние отправки является частью API истории. Лучший учебник, не зависящий от фреймворка, — это Mozilla Developer Network Управление историей браузера.
Если вы рассматриваете React как альтернативу Aurelia, вам может быть интересно узнать, что React Router также поддерживает pushstate.
Генерация URL-адресов маршрута из конфигурации маршрутизации
У нас есть дата, которая выглядит сломанной — простая ошибка, которая не имеет ничего общего с фреймворком Aurelia и устраняется удалением одной строки кода.
Далее мы хотим использовать динамически генерируемые ссылки. У нас есть несколько жестко запрограммированных ссылок, например:
href=’#/eventDetails/${event.id}’
Мы видим, как добавить имя «eventDetail» в определение нашего маршрута в shell.js, импортировать Router в events.js и обновить наш конструктор, чтобы использовать его.
Имея это на месте, мы можем изменить ссылку, чтобы она была привязана к данным:
href.bind=’event.detailUrl’
Использование параметров строки запроса
В этой демонстрации показано, как мы можем использовать параметры строки запроса для передачи информации в ViewModel для управления ее поведением.
Брайан говорит, что в бета-версии параметры строки запроса без # не будут работать. Возможно, это было исправлено в Release Candidate, мне нужно проверить это…
Пример URL-адреса, который вы видите:
локальный: 2112/index.html#?speaker=noyes
Здесь отображаются только те выступления, для которых выступал Брайан.
Программное управление навигацией
Иногда нам нужно программно вызвать навигацию по одному из наших маршрутов.
Брайан добавляет кнопку в наше представление событий с привязкой click.trigger к новому методу goToDiscussion().
Этот метод просто:
this.router.navigate('#/обсуждение');
Мы видим, что мы могли бы также использовать метод navigationToRoute.
