В этой заметке я расскажу как подружить 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 было бы немного больше кода.