从淘汰赛中关闭Bootstrap的模态

Question

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

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

• 我向Knockout添加了新的绑定处理程序，以允许在特定元素上禁用绑定
• 模态是使用小胡子从模板生成的
• 小胡子填写模态的相关部分（标题，正文，按钮）
• 模式包装在div中，它将停止数据绑定（modalWrapper）
• ...这样我就可以使用ko.applyBindings]将自定义viewmodel应用于模态

• 按钮是根据描述自动生成的，例如：

{
    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);
};
我对此自动关闭功能有疑问。如果打开，则视图模型将处理click，模态由Bootstrap机制关闭，然后在隐藏后从DOM中删除。

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

viewmodel['close'] = function() { $modal.modal('hide'); };
然而，这似乎是一个棘手的解决方案（即使对于Javascript也是如此）。同样，我可以将$modal本身注入到视图模型中，但这将更加丑陋。

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

我编写了一个函数（基于在Internet上找到的其他函数），该函数有助于显示动态生成的模式，而无需在页面的HTML中创建模式。为了简化代码分析，请简要：...

Answer 1

我通过向模式id标签分配（自动生成）

Answer 2

我将创建一个自定义的Knockout绑定，以处理模式的可见性。该绑定将绑定的模态元素连接到提供的可观察模型。现在，模型中的单击处理程序只需管理此可观察项即可控制模式可见性。