В этой заметке я расскажу как подружить Backbone Marionette и Bootstrap Modal. Есть, конечно, замечательный плагин Backbone.Modal, но в некоторых случаях он может оказаться излишеством.
Вместо Alpha-версии Bootstrap v4 можно использовать v3+. А вместо Marionette.CompositeView - Marionette.ItemView. Это не принципиально.
Итак, создаем шаблон для модального окна.
<script type="text/template" id="app-modal-template"> <div class="modal fade"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title"><%- modalTitle %></h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal"> Закрыть </button> </div> </div> </div> </div> </script>
На странице приложения создаем контейнер для модальных окон:
<div id="app-modals"></div>
Вью для этого шаблона будет выглядеть примерно так:
var ModalView = Marionette.CompositeView.extend({ el: '#app-modals', template: '#app-modal-template', childViewContainer: '.modal-body', initialize: function () { this.render(); }, _removeElement: function() { this.onDestroy(); this.undelegateEvents(); this.$el.empty(); }, onRender: function () { var modalView = this; this.$('.modal') .modal('show') .on('shown.bs.modal', function (e) { modalView.onShow(); }) .on('hidden.bs.modal', function (e) { modalView.destroy(); }) }, hide: function(){ this.$('.modal').modal('hide'); }, onShow: function () { }, onDestroy: function () { } });
Пример использования:
var modal = new ModalView({ collection: new Backbone.Collection(),//тут ваша коллекция model: new Backbone.Model({ modalTitle: 'Заголовок окна' }) });
Вот так всё просто с Marionette. На чистом Backbone было бы немного больше кода.