Twitter bootstrap 3 Modal 与淘汰赛 [英] Twitter bootstrap 3 Modal with knockout

问题描述

我正在尝试将 Twitter 引导模式与淘汰赛完全绑定.通过完全绑定，我的意思是我希望与模态对话框的每一次密切交互都能与淘汰赛一起使用.我已经看到了一些 问题，它们部分绑定了它们(例如这个不允许 esc).

I am trying to fully bind twitter bootstrap modal with knockout. By fully bind I mean that I want every close interaction with modal dialog to work with knockout. I have seen some of the questions, which partially bind them (for example this one does not allow esc).

我使用几乎相同的绑定(我实际上在别处找到了)

I am using almost identical binding (which I actually found elsewhere)

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');
        }
    }
}

但问题是在我的小提琴中并不是所有的东西都能正常工作.如您所见，如果您使用关闭按钮关闭模态，您可以再次触发此模态.但是如果你用Esc键关闭它，或者点击背景，或者点击X按钮，你就不能再打开Modal了.

But the problem is that not everything work in my Fiddle. As you see if you close Modal with Close button, you can fire this modal again. But if you close it with Esc key, or with clicking on background, or on the X button, you can not open Modal again.

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

I know that the problem is due to the fact that when I close modal with other means (it is not changing observable and therefore when I fire it for the second time - nothing changes). But I can not figure out how to do this properly.

这是我的 hack :-)，一切正常.我每次都赋予新的价值.但是有更好的方法吗?

Here is my hack :-), where everything works. I am giving new value each time. But is there a better way?

推荐答案

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

bootstrap modal provided events, you just need to hook up event 'hidden.bs.modal'.

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

BTW, do proper disposal too. 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');
        }
    }
}

这篇关于Twitter bootstrap 3 Modal 与淘汰赛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！