Закрытие модального Bootstrap от Knockout - PullRequest
1 голос
/ 08 ноября 2019

Я написал функцию (на основе некоторых других, которые я нашел в Интернете), которая помогает отображать динамически генерируемые модалы без необходимости создавать их в HTML страницы.

Чтобы упростить анализ кода, кратко:

  • Я добавляю новый обработчик привязки в Knockout, чтобы разрешить отключение привязки для определенного элемента
  • Модал генерируется из шаблона с использованием усов
  • Усы заполняют соответствующие части модальных(заголовок, тело, кнопки)
  • Модал заключен в div, что останавливает привязку данных (modalWrapper)
  • ..., чтобы я мог применить пользовательскую модель представления к модалу с помощью ko.applyBindings
  • Кнопки генерируются автоматически на основе описания, например:

    {
        label: "OK",
        cssClass: "default",
        handler: "handleClick", // sets data-bind="click: handleClick"
        autoClose: true // adds data-dismiss="modal"
    }
    

Соответствующие части кода следующие:

ko.bindingHandlers.stopBinding = {
    init: function () {
        return { controlsDescendantBindings: true };
    }
};

var modalTemplate = '<div class="modal fade">\
    <div class="modal-dialog {{size}}">\
        <div class="modal-content">\
            <div class="modal-header">\
                <h5 class="modal-title">{{title}}</h5>\
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
            </div>\
            <div class="modal-body">{{&body}}</div>\
            <div class="modal-footer">{{&buttons}}</div>\
        </div>\
    </div>\
</div>';

/**
 * Displays modal on the screen.
 * @param {Object} options Options
 * @param {string} options.title Title of the modal
 * @param {html} options.body Body of the modal
 * @param {string} options.size Size of the modal. Can be small, default, large or xlarge.
 * @param {Object} options.actions Describes buttons to display on the modal. For each, specify label, cssClass, handler and optionally autoClose.
 */
var showModal = function(options) {

    options = options || {};

    options = $.extend({
        title: '',
        body: '',
        size: false,
        actions: false,
        viewModel: {}
    }, options);

    var modalClass = {
        small: "modal-sm",
        default: "",
        large: "modal-lg",
        xlarge: "modal-xl"
    };

    var modalWrapper = $('<div data-bind="stopBinding: true"></div>').appendTo('body');

    var buttons;
    if (options.actions === false) {

        buttons = '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
    } else {

        buttons = "";

        for (var i = 0, len = options.actions.length; i < len; i++) {

            var currentButton = $.extend({

                label: '&lt;No label&gt;',
                cssClass: 'default',
                handler: '',
                autoClose: true
            }, options.actions[i]);

            var btn = '<button type="button" class="btn ' +
                options.actions[i].cssClass +
                '" data-bind="click: ' +
                options.actions[i].handler +
                (options.actions[i].autoClose === true ? '" data-dismiss="modal"' : '')
                + '>'
                + options.actions[i].label
                + '</button>';

            buttons += btn;
        }
    }

    var templateData = {

        title: options.title,
        body: options.body,
        size: modalClass[options.size],
        buttons: buttons
    };

    var modalHtml = Mustache.render(modalTemplate, templateData);

    var $modal = $(modalHtml).appendTo(modalWrapper);

    $modal.on('hidden.bs.modal', function (e) {

        modalWrapper.remove();
    });

    ko.applyBindings(options.viewModel, $modal.get()[0]);

    $modal.modal(options);
};

У меня есть проблема с этой функцией автоматического закрытия. Если он включен, viewmodel обрабатывает щелчок, модал закрывается механизмами Bootstrap и затем удаляется из DOM после скрытия.

Но когда я хочу, чтобы кнопка не была автоматически закрывающейся, у меня нет средств для закрытиямодальный от viewmodel. Решение, о котором я подумал, заключалось в том, чтобы внедрить метод для представления модели, например:

viewmodel['close'] = function() { $modal.modal('hide'); };

Однако это кажется хакерским решением (даже для Javascript;)). Точно так же я могу внедрить саму $modal в модель представления, но это было бы еще более уродливо.

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

Ответы [ 2 ]

1 голос
/ 08 ноября 2019

Я решил аналогичное требование, присвоив (автоматически сгенерированный) id модальному тегу div.

var modalId = ('modal' + Math.random()).replace('.', '');
var modalTemplate = '<div class="modal fade" id="' + modalId + '">'\ // remaining code here

Затем, что idпередается viewmodel, который позволяет ему закрывать соответствующий модал с помощью

$('#' + _self.modalId).modal('hide'); 

Сравнимая подписка на события для 'hidden.bs.modal' обрабатывает очистку.

0 голосов
/ 12 ноября 2019

Я бы создал пользовательскую привязку Knockout для обработки видимости модальной зоны. Эта привязка соединяет связанный модальный элемент с предоставленной наблюдаемой моделью. Обработчики щелчков в модели теперь должны управлять только этой наблюдаемой для управления модальной видимостью.

Вы можете применить эту привязку, например, в вашей переменной modalTemplate: var modalTemplate = `<div class="modal fade" data-bind="bootstrapModalVisible: yourObservable">\ ...

Я не включил привязку в вашем случае, но ниже приведен пример работы этой привязки.

  • Обсервируемая переменная modalVisible инициализируется значением true, поэтому модальная строка немедленно показывает
  • верхняя правая кнопка закрытия закрывает модальное из-за data-dismiss="modal". Обработчики событий в привязке init обеспечат запись правильного состояния в наблюдаемую область.
  • кнопка сохранения закрывает только модальное после подтверждения, показывая возможность отложить закрытие модального

ko.bindingHandlers['bootstrapModalVisible'] = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
      $(element).on('hidden.bs.modal', function () { valueAccessor()(false); })
      $(element).on('shown.bs.modal', function () { valueAccessor()(true); })
    },
    update: function (element, valueAccessor) {
      if (ko.unwrap(valueAccessor())) {
          $(element).modal('show');
      } else {
          $(element).modal('hide');
      }
    }
};

function Test() {
  var self = this;
  self.modalVisible = ko.observable(true);
  self.showModal = function() {
    self.modalVisible(true);
  };
  self.hideModal = function() {
    self.modalVisible(false);
  };
  self.save = function() {
    if (window.confirm('Close modal?')) {
      self.modalVisible(false);
    }
  }
}

ko.applyBindings(new Test());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-bind="click: showModal">
  Launch demo modal
</button>

<div class="modal fade" data-bind="bootstrapModalVisible: modalVisible">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Example modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bind="click: hideModal">Close</button>
        <button type="button" class="btn btn-primary" data-bind="click: save">Save changes</button>
      </div>
    </div>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...