等待对话框消失的事件

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

只需将函数绑定到模态隐藏的事件（此事件称为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 上的引导文档：

当模式对用户完成隐藏时触发此事件（将等待 CSS 转换完成）​​。

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

当调用 hide 实例方法时立即触发此事件。