Составление большого приложения Aurelia — несколько приложений на одной странице

Итак, у меня есть большое приложение, состоящее из функций. Каждая функция доступна через меню, которое загружает веб-страницу, содержащую приложение aurelia для этой конкретной функции. Это работает нормально, так как позволяет мне выполнять функцию за раз и использовать потенциально разные технологии на стороне клиента по ходу работы.

Однако теперь мне нужно иметь более одного приложения Aurelia на одной странице: приложение «функция», описанное выше, и приложение «панель навигации», которое всегда будет находиться на верхней панели навигации. Таким образом, расположение выглядит следующим образом.

Я использую webpack с плагином aurelia webpack. Я пробовал различные механизмы, чтобы заставить это работать, но я сталкивался с проблемами на каждом шагу. Моя текущая модель заключается в ручной загрузке приложения «функция» и приложения «навигация» из одного файла конфигурации веб-пакета:

entry: {
    packages: [
        "main","nav"
    ]
},

В каждом из этих модулей я вручную загружаю, например:

bootstrap((aurelia: Aurelia) => {
    // init code
    aurelia.start())
    .then(() => aurelia.setRoot(PLATFORM.moduleName("app"), document.querySelector("#packages-app")));});

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

Мои вопросы

Является ли это поддерживаемым или даже подходящим способом разделения функциональности?
Кажется, я получаю код в одном модуле, влияющий на другой. Есть ли способ, которым компонент Aurelia, который внедряется в модули в каждом приложении, имеет общее состояние?

🤔 А знаете ли вы, что...
Aurelia обладает выдающейся производительностью благодаря эффективной системе обновления DOM.

298

Aurelia384 вопроса

Ответ:

Это полностью верный сценарий, как вы ответили на другой вопрос в Плагин Aurelia Webpack — опция aureliaApp — «модуль не найден».

Is this a supported or even an appropriate way to split functionality?

Да, это абсолютно верный сценарий, и вы, вероятно, не одиноки в этом.

I seem to get code in one module affecting the other. Is there any way an Aurelia component which is DI injected into modules in each app have shared state?

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

// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';

// precreate store instance
const the_one_and_only_store = new Store(initState, options);

// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
  // do your configuration
  aurelia.container.registerInstance(Store, the_one_and_only_store);

  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('topnav'),
      document.querySelector('#topnav')
    );
});

// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
  // aurelia.use.standardConfiguration();
  // ...
  aurelia.container.registerInstance(Store, the_one_and_only_store);

  aurelia
    .start()
    .then(() => aurelia.setRoot(
      PLATFORM.moduleName('app'),
      document.querySelector('app')
    )
});

Теперь все инъекции Store в обоих приложениях будут направлены на ваш единственный магазин.

Составление большого приложения Aurelia — несколько приложений на одной странице

Ответ:

Интересные вопросы для изучения