Есть ли лучший способ динамически загрузить модель представления и представление для отображения модального режима, чем привязка имени модуля в app.js?

Question

То, что я делаю, кажется мне неприятным, и я хотел бы знать, есть ли лучший способ сделать это: я использую

<compose view-model.bind="modalModel.viewModel"></compose>

в моем app.html. Когда мне нужно отобразить модальный режим, независимо от того, какая модель просмотра активна, будет запущено событие публикации агрегатора событий с модальной моделью, которая содержит три вещи. Модальное название, массив кнопок (строк) и путь модуля к представлению / модели представления. В app.js я подписываюсь на модальное событие, и когда оно проходит, я устанавливаю приложение

this.modalModel = modalModel;

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

1. canDeactivate () и deactivate() никогда не вызываются в загружаемой модельной модели просмотра, когда сбрасывается modalModel app.js.
2. Я не думаю, что могу передать какие-либо параметры в метод activ () в модальной viewmodel.
3. Это просто кажется вялым.

Может ли быть лучший способ динамически загружать в представление и модель представления, связанные и все такое, таким образом, что он может быть надлежащим образом деактивирован при закрытии модального?

Соответствующий код:

<template>
  <require from="./app-head"></require>
  <require from="./main-nav"></require>

  <!-- actual site content removed for this example -->

  <div class="modal" id="main-modal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-ajax"></div>
        <div class="modal-header">
          <button type="button" class="close" click.delegate="modalButtonClick('Cancel')">&times;</button>
          <h4 class="modal-title">${modalModel.title}</h4>
        </div>
        <div class="modal-body">

          <!-- EMPHASIS HERE: -->
          <compose view-model.bind="modalModel.viewModel"></compose>


        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-default" repeat.for="button of modalModel.buttons"
            click.delegate="modalButtonClick(button)">
            ${button}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

export class App {
  //...

  attached() {
    //...
    this.listen('show-modal', this.displayModal.bind(this));
    this.listen('hide-modal', this.closeModal.bind(this));
    this.listen('show-modal-loader', this.showModalLoader.bind(this));
    this.listen('hide-modal-loader', this.hideModalLoader.bind(this));
  }

  displayModal(modalModel) {
    this.modalModel = modalModel;
    $('#main-modal').modal();
  }

  closeModal() {
    $('#main-modal').modal('hide');
    this.modalModel = null;
  }

  showModalLoader() {
    document.querySelector('#main-modal .modal-ajax').style.display = 'block';
  }

  hideModalLoader() {
    document.querySelector('#main-modal .modal-ajax').style.display = 'none';
  }

  listen(event, fn) {
    this.eventAggregatorSubscriptions.push(this.ea.subscribe(event, fn));
  }
}

Answer 1

Используйте плагин aurelia-dialog.

Установить: jspm install aurelia-dialog

Для активации: в main.jsconfigure(), вызов aurelia.use.plugin('aurelia-dialog');

Использование: https://github.com/aurelia/dialog