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

问题描述

我正在尝试将Twitter Bootstrap模式与淘汰赛完全绑定.通过完全绑定，我的意思是我希望与模态对话框的每次紧密交互都可以使用剔除.我已经看到了一些问题，它们部分绑定了它们(例如，这个不允许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?

推荐答案

引导模态提供的事件，您只需要挂接事件'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模态与淘汰赛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！