Backbone Marionette - переход между модальными диалогами

Question

У меня есть Marionette.CompositeView, который показывает модальное диалоговое окно при нажатии.

events: {
  'click #my-new-view' : 'viewMyNewView'
}
...
viewMyNewView: function() {
  var newView = new MyNewView();
  App.modal.show(newView);
}

Это представление в свою очередь показывает другое модальное диалоговое окно при щелчке таким же образом.

(_.extend(Marionette.Region.prototype, Backbone.Events, {...})

Функциональность App.modal является частью backbone.marionette.js, где-то в методе show все идет не так. Сложно точно определить, где, потому что, когда я прохожу и отлаживаю, с точкой останова на последней строке в методе show (устанавливая this.currentView = view;), тогда 2-й модальный режим отображается нормально и не исчезает даже после продолжения. Без точки останова 2-й модал исчезает каждый раз. Так что может быть какая-то временная проблема.

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

Я попытался добавить вызовы e.stopPropagation() и e.preventDefault() в обоих обработчиках кликов, но они не решают проблему.

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

Первый модальный является частью Marionette.CompositeView, который является областью в Marionette.Layout.

Answer 1

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

Другое решение, вы можете переключиться только на один модальный. Доставить подробный вид элемента в виде JSON и шаблона вместе с представлением списка. Затем по щелчку вместо вызова нового модального режима просто визуализируйте и отобразите в существующем модальном режиме.

Answer 2

Похоже, вы используете модальный плагин Twitter Bootstrap? Я столкнулся с тем, что звучит как та же проблема, работая с ним.

Проблема, по сути, заключается в том, что если вы вызываете.modal('hide'), а затем.modal('show') в быстрой последовательности, это запутывается - я полагаю, это потому, что используемые CSS-переходы еще не завершены, и show get вызывает называется, пока он еще находится в процессе перехода. Мое решение было немного более сложным, но простым способом было бы прослушать событие hidden.bs.modal перед запуском шоу. Согласно документам:

Msgstr "Это событие вызывается, когда модал закончил, будучи скрытым от пользователя (будет ждать завершения переходов CSS).