knockout.js - 带有 knockout 的 Twitter bootstrap 3 模态

Question

我正在尝试将 twitter 引导模式与 knockout 完全绑定(bind)。通过完全绑定(bind)，我的意思是我希望与模态对话框的每一次密切交互都能与 knockout 一起工作。我看过一些questions , 部分绑定(bind)它们(例如这个不允许 esc)。

我正在使用几乎相同的绑定(bind)(我实际上在其他地方找到了)

ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });
    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }
    }
}

但问题是并非一切都在 my Fiddle 中有效。 .如您所见，如果您使用关闭按钮关闭模态，您可以再次触发此模态。但是如果你用 Esc 键关闭它，或者点击背景，或者 X 按钮，你不能再次打开 Modal。

我知道问题是由于当我用其他方式关闭模式时(它不会改变可观察的，因此当我第二次触发它时 - 没有任何改变)。但我不知道如何正确地做到这一点。

这是我的 hack :-)，一切正常。我每次都在赋予新的值(value)。但是有更好的方法吗？

Answer 1

bootstrap modal 提供的事件，你只需要连接事件'hidden.bs.modal'。

顺便说一句，也要妥善处理。
http://jsfiddle.net/C8w8v/377/

ko.bindingHandlers.modal = {
    init: function (element, valueAccessor) {
        $(element).modal({
            show: false
        });

        var value = valueAccessor();
        if (ko.isObservable(value)) {
            // Update 28/02/2018
            // Thank @HeyJude for fixing a bug on
            // double "hide.bs.modal" event firing.
            // Use "hidden.bs.modal" event to avoid
            // bootstrap running internal modal.hide() twice.
            $(element).on('hidden.bs.modal', function() {
               value(false);
            });
        }

        // Update 13/07/2016
        // based on @Richard's finding,
        // don't need to destroy modal explicitly in latest bootstrap.
        // modal('destroy') doesn't exist in latest bootstrap.
        // ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
        //    $(element).modal("destroy");
        // });

    },
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        if (ko.utils.unwrapObservable(value)) {
            $(element).modal('show');
        } else {
            $(element).modal('hide');
        }
    }
}