DoneJS - Динамический загрузчик

В Chat-Demo существует синтаксис, в котором код ( https://donejs.com/Guide.html) разбивается на два блока: один для <chat-messages/> загружать всякий раз, когда page='chat'и еще один для <chat-home/> для дома.

Эти два блока очень похожи.

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

Нужно ли создавать столько блоков "если", сколько опций в меню, или есть другой более компактный способ сделать это?

Источник

1 ответ

Несколько блоков "если" - это простой способ быстро приступить к работе с приложением. Тем не менее, это не работает, когда ваше приложение начинает расти. Есть методика, которую я использовал в приложениях, которая работает очень хорошо. Я загрузил версию демо чата donejs со своими настройками. Я предлагаю вам снять его, прежде чем читать дальше:

https://github.com/DesignByOnyx/donejs-with-route-config

Есть 3 коммита, чтобы вы могли видеть изменения между каждым шагом процесса. Самые важные части в 3-м коммите:

  1. Создайте приложение чата DoneJS без изменений: e0398af4c23207d527c054f1fb1ea65b419119a0

  2. Добавьте компонент home.component и сообщения: 56c2202c117049f67ff7dc52b054ad30cc5b71eb

  3. Добавить маршрут-конфигурацию, компонент навигации, динамическую загрузку, комплектацию: 4a924693bfd8a3469d69a6ccb5abe8675724e8a9

Описание Commit #3

Последний коммит содержит всю магию (и результат многих часов работы из моего последнего проекта). Вы должны начать с рассмотрения src/route-config.js файл, так как он содержит всю информацию о маршрутизации и динамических модулях для приложения. Есть пара вещей, которые вы должны знать:

Объект "модули" представляет собой простое сопоставление дружественных по отношению к URL имен к модулю, который они должны загрузить. Вы можете переименовать их, как хотите.

ПРИМЕЧАНИЕ: для каждого элемента будет создан отдельный пакет в процессе сборки.

const modules = {
  'home': '~/home.component',
  'messages': '~/messages/messages',
};

Основной экспорт - это массив маршрутов, которые будут зарегистрированы для вашего приложения:

module.exports = [
  { route: '/', nav: 'Home', data: { moduleId: modules.home } },
  { route: '/chat', nav: 'Chat Messages', data: { moduleId: modules.messages } },
];

Для каждого элемента в массиве есть 3 свойства:

  1. route: параметризованный маршрут - вы можете включить такие параметры, как /user/{userId} для динамической маршрутизации, как описано в документации.
  2. data: данные по умолчанию для маршрута. Всякий раз, когда URL соответствует маршруту, данные по умолчанию будут объединены с моделью представления приложения. Увидеть moduleId Свойство на приложение ViewModel.
  3. nav (необязательно): если указано, это значение будет использоваться для создания ссылки в главном компоненте навигации.
Источник
Другие вопросы по тегам