javascript - knockout 模态窗口只打开一次

Question

我有 Bootstrap 模式窗口，它在单击按钮时打开。一切正常，除了一件事:当我点击模态空间时 - 模态窗口关闭但我可以在点击按钮时再次打开它。如果我在按钮关闭时关闭模式 - 它运行良好。

更新:当我使用“Esc”键盘关闭模态时 - 行为与非模态点击相同。

---

HTML

<button data-bind="click: function () { $root.showLogModal(); }" title="Show Logs" class="btn btn-large btn-info">Show Logs</button>

<div data-bind="bootstrapLogModal: logModal" tabindex="-1" role="dialog"></div>

自定义模板

<script id="showLogModal" type="text/html">
<div class="modal-header">
    <button type="button" class="close" data-bind="click: close" aria-hidden="true">&times;</button>
    <h3>Logs</h3>
</div>
<div class="modal-body">
    <div class="alert alert-info">
      Some Content
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn" data-bind="click: close">Close</button>
</div>

JS

function ViewModel() {
    var self = this;

    self.logModal = {
        show: ko.observable(false),

        onClose: function () {
        },
        onAction: function () {
        }
    };

    self.showLogModal = function () {
        self.logModal.show(true);
    };
}

$(function () {
    var viewModel = new ViewModel();

    ko.bindingHandlers.bootstrapLogModal = {
        init: function (element, valueAccessor, allBindingsAccessor, data, bindingContext) {
            var props = valueAccessor(),
                vm = bindingContext.createChildContext(data);
            ko.utils.extend(vm, props);
            vm.close = function () {
                vm.show(false);
                vm.onClose();
            };
            vm.action = function () {
                vm.onAction();
            };
            ko.utils.toggleDomNodeCssClass(element, "modal hide fade large", true);
            ko.renderTemplate("showLogModal", vm, null, element);
            var showHide = ko.computed(function () {
                $(element).modal(vm.show() ? 'show' : 'hide');
            });
            return {
                controlsDescendantBindings: true
            };
        }
    };

    ko.applyBindings(viewModel);

});

---

http://jsfiddle.net/tLT6d/这是现场示例。

Answer 1

这是预期的行为，如果您想在点击外部区域时阻止模式关闭，请提供 backdrop 属性作为 'static'。

Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.

更新

我不知道为什么要将引导模式重写为 knockout ，但为了让您的代码在单击外部区域时无需关闭模式即可工作。只需在您的绑定(bind)处理程序中添加这行代码

ko.renderTemplate("showLogModal", vm, null, element);
// adds new code
$(element).modal({ backdrop: 'static', show: false });
var showHide = ko.computed(function () {
   $(element).modal(vm.show() ? 'show' : 'hide');
});

更新2

要修复您的初始代码以执行正确的关闭，当单击外部区域时，附加隐藏的事件处理程序并调用相关的关闭方法。

// adds new code
$(element).on("hidden.bs.modal", function(){
   vm.close();
});
var showHide = ko.computed(function () {
   $(element).modal(vm.show() ? 'show' : 'hide');
});