Как вы, возможно, знаете (если нет, прочтите наши статьи 😉), в Appaloosa мы недавно выпускаем наш новый интерфейс для наших клиентов.

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

Для частей, которые недоступны (пока), мы перенаправляем наших пользователей к нашему старому / унаследованному администратору.

Этот новый интерфейс построен на EmberJS, и сегодня мы решили показать вам, как мы управляем переходом от нашего нового администратора к нашему старому. Мы решили поделиться своим решением, потому что считаем, что оно может помочь людям, которым нужно добавить такое же поведение.

Но сначала давайте посмотрим, как это выглядит в реальности.

Почему модальное перенаправление?

Прежде чем заняться перенаправлением, давайте создадим красивое модальное окно. Модальное окно очень важно, потому что оно информирует пользователя о том, что происходит. Без модального окна пользователь был бы потерян. Представьте, что вы находитесь в красивом интерфейсе и внезапно попадаете на другой веб-сайт с совершенно другим и старомодным дизайном 😱.

Как сделать перенаправление

Начнем с HTML

Теперь, когда у нас есть модальное окно, давайте добавим немного CSS для создания красивого модального окна.

Теперь, когда у нас есть хорошее модальное окно, давайте сделаем перенаправление. Чтобы упростить добавление / удаление перенаправления в наших шаблонах, мы решили использовать сервис и использовать простую ссылку HTML.

Давайте посмотрим на службу перенаправления.

Эта услуга довольно проста, состоит из 3-х действий:

перенаправление: это действие настраивает перенаправление, сохраняя URL-адрес запроса и отображая модальное окно перенаправления.
continueRedirection: это действие запускает перенаправление на запрошенную страницу < br /> cancelRedirection: отменить перенаправление. Очистите службу перенаправления, удалив сохраненный URL-адрес и закройте всплывающее окно перенаправления.

Он также предоставляет displayModal, который используется для отображения модального окна при необходимости.

Потому что с Ember вы можете указать цель для действия. Добавить перенаправление в приложение так же просто, как добавить тег ссылки в шаблон (компонент или маршрут). Единственное требование - внедрить сервис.

Как видите, добавить такую ​​службу перенаправления довольно просто, единственная сложная часть - это обнаружить обратную навигацию и закрыть всплывающее окно перенаправления. К счастью, начиная с Ember 2.15 появилась служба маршрутизатора, которую вы можете использовать (см. Примечание к выпуску здесь). Используя эту услугу, вы можете легко обнаружить обратную навигацию, наблюдая за текущим маршрутом маршрутизатора. Итак, давайте немного изменим предыдущий код.

Теперь мы можем обнаруживать любое «обратное» действие навигации и автоматически закрывать модальное окно.

Делаем больше, чем перенаправление

В этой статье мы расскажем, как создать простое перенаправление, открывающее всплывающее окно. Это всего лишь базовый простой пример, вы можете сделать больше.

Например, в Appaloosa мы отправляем некоторую аналитику при перенаправлении пользователя. Таким образом, мы отдаем приоритет передаче функции от старого администратора новому, потому что мы знаем, какая функция больше всего нужна нашим пользователям.

С помощью того же кода вы также можете добавить поле ввода во всплывающее окно перенаправления с просьбой оставить отзыв или оценить их опыт… на ваше усмотрение 😉

👋

Вам следует подписаться на наш блог, чтобы получать уведомления о появлении новой статьи!

Эту статью написал Бенджамин ДЖЕГАРД из команды разработчиков Appaloosa.
PS: Здесь есть живой пример этой службы перенаправления 🤩 .