javascript - 等待对话框消失的事件

Question

在我正在使用 Knockout.js 的模态对话框表单中，“提交”按钮会触发一个方法，该方法应该隐藏对话框，然后设置变量的值。

self.updateSubTask = function(subTask) {
    ...
    $('#subTaskDialog').modal('hide');
    self.selectedSubTask(null);
};

当调用此函数时，隐藏过程开始 - 对话框本身被删除 - 但在完成之前停止，并且灰色背景无限期地持续存在。经过一番调查，这很可能是因为随后设置 self.selectedSubTask 值的调用破坏了隐藏“动画”。不幸的是，由于对话框的设置方式，必须在更改 selectedSubTask 之前进行模态调用。我尝试过以下方法:

_.defer(function() { self.selectedSubTask(null); })
$('#subTaskDialog').queue(function() { self.selectedSubTask(null); });

不幸的是，这两种方法都不起作用，而且行为是相同的。

我认为合理的做法是监听对话框何时隐藏，并在该事件处理程序中包含 selectedSubTask 调用。然而，我很难找到实现这一目标的解决方案。任何关于如何做到这一点的建议，或任何其他方法来实现我的最终目标，将不胜感激。干杯!

Answer 1

只需将一个函数绑定(bind)到隐藏模式的事件(此事件称为 hidden.bs.modal):

self.updateSubTask = function(subTask) {
    $('#subTaskDialog').modal('hide');

    // capture the modal's "hidden" event
    $( "#subTaskDialog" ).on('hidden.bs.modal', function(){
        self.selectedSubTask(null);
    });
};

来自 hidden.bs.modal 上的 Bootstrap 文档:

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

还有一个 hide.bs.modal 事件，以防更适合您所需的功能。来自 Bootstrap 文档:

This event is fired immediately when the hide instance method has been called.