从 Knockout 关闭 Bootstrap 的模态

Question

我写了一个 function（基于我在 Internet 上找到的其他一些），它有助于显示动态生成的模态，而无需在页面的 HTML 中创建模态。

为了简化代码分析，简要说明：

• 我向 Knockout 添加了新的绑定处理程序以允许禁用对特定元素的绑定
• 模态是使用 Mustache 从模板生成的
• Mustache 填充 modal 的相关部分（标题、正文、按钮）
• 模态被包裹在 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 处理点击，modal 被 Bootstrap 机制关闭，隐藏后从 DOM 中移除。

但是当我想要一个非自动关闭的按钮时，我无法从视图模型中关闭模式。 我想到的解决方案是向视图模型注入一种方法，例如：

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

然而，这似乎是一个骇人听闻的解决方案（即使对于 Javascript;)）。 同样，我可以将$modal本身注入到视图模型中，但这会更难看。

那么从模态的视图模型中关闭模态的最佳方法是什么？

Answer 1

我通过为模态div标签分配（自动生成的） id解决了类似的要求。

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'的类似事件订阅处理清理。

Answer 2

我将创建一个自定义 Knockout 绑定来处理模式的可见性。 此绑定将绑定的模态元素连接到提供的 model 可观察对象。 model 中的点击处理程序现在只需要管理这个 observable 来控制模态可见性。

例如，您可以在modalTemplate变量中应用此绑定： var modalTemplate = `<div class="modal fade" data-bind="bootstrapModalVisible: yourObservable">\ ...

我没有在您的情况下合并绑定，但下面是此绑定工作的示例。

• modalVisible observable 初始化为 true，因此模态立即显示
• 关闭按钮通过将 observable 设置为 false 来立即隐藏模式
• 由于data-dismiss="modal" ，右上角的关闭按钮会关闭模式。 绑定init中的事件处理程序将确保将正确的 state 写入可观察对象。
• 保存按钮仅在确认时关闭模态，显示推迟关闭模态的可能性

 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>