25.06.2016     1762

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