带有淘汰赛的 Twitter bootstrap 3 模态答案

【问题标题】：Twitter bootstrap 3 Modal with knockout带有淘汰赛的 Twitter bootstrap 3 模态
【发布时间】：2014-05-07 13:21:49
【问题描述】：

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

我使用几乎相同的绑定（我实际上在其他地方找到了）

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 :-)，一切正常。我每次都在赋予新的价值。但是有没有更好的方法？

【问题讨论】：

标签： knockout.js twitter-bootstrap-3

【解决方案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');
        }
    }
}

【讨论】：

酷，谢谢。将在几分钟内接受。你能告诉我为什么我需要在这里处理吗？
在您的情况下，这可能无关紧要。但是，如果你将模态 dom 包装在另一个
中。 ko 将在 some_condition 更改时初始化您的模态并处理您的模态。当 ko 删除 dom 元素（您的模态）时，处置可防止潜在的内存泄漏。它在整个 ko 标准绑定中使用。太可惜了 ko 网站没有记录这一点。
他们确实记录了这一点；）knockoutjs.com/documentation/custom-bindings-disposal.html
当时可能已经不一样了，但是modal插件没有destroy方法（从3.3.6开始）。调用处置时，原样代码会产生错误。
@Richard 谢谢。看起来引导程序最终会清理它。 github.com/jschr/bootstrap-modal/blob/…

【解决方案2】：

稍微简洁的 BS 绑定代码 - 并在需要时添加类。：

ko.bindingHandlers.BSModal= {
    init: function (element, valueAccessor) {
        var value = valueAccessor();
        $(element).addClass('modal').addClass('fade').modal({ keyboard: false, show: ko.unwrap(value) });;
    },
    update: function (element, valueAccessor) {
         var value = valueAccessor();
         ko.unwrap(value) ? $(element).modal('show') : $(element).modal('hide');
    }
};

那么只需data-bind="BSModal: true/false Observable" 值。

【讨论】：