Backbone - 删除视图后防止延迟执行

Question

我有一个主视图，其中有一个框，其中包含您可以在它们之间切换的子视图

fetch ajax 调用成功后，主视图上会显示一个“成功”的 div。

我面临的问题是，当我在子视图之间切换时，前一个视图提取的延迟承诺仍然会被执行并显示“成功”div。

这是我的代码：

this.model.fetch().done(function() {
  $('#success').show();
});

onChangeSubview: function() {
    this.subview.unbind();
    this.subview.remove();
}

这个 SO question abort-ajax-requests-using-jquery 说您可以将指针存储到 deferred 并通过调用 abort() 来停止它，如下所示：

var fetchXhr = this.model.fetch().done(function() {
  $('#success').show();
});
onChangeSubview: function() {
    fetchXhr.abort();
}

我对每个子视图有几个提取，并且一些在一个间隔内重复，这意味着我必须存储每个提取请求并循环遍历它们，在每个子视图上调用 abort。

有没有更好的方法来阻止延迟函数的执行？ 例如：某种检查以查看子视图是否已被删除，或者取消绑定所有延迟承诺的功能？

Answer 1

中止不一定是可取的，因为您可能希望即使隐藏视图也能继续刷新（确认您当前取消绑定/删除）。

您当然可以通过采用一种导致“#success”元素有条件地显示的模式来避免中止的需要，例如通过使用返回显示#success元素的函数的方法来装配$('#success')对象仅当特定子视图（或其容器）可见（或任何适合的标准）时。

// in some suitable outer context
var $success = $('#success');
$success.showConditional = function($container) {
    var $self = $(this);
    return function() {
        if($container.is(':visible')) {
            $self.show();
        }
    }
};

...

$subviewContainer = $("someSelector"); //or maybe the container is already a property of this or this.model?
this.model.fetch().done($success.showConditional($subviewContainer));

在所有提取都采用该模式后，#success 元素将不会显示隐藏或删除的子视图。

这就是原则。您可能需要调整细节以适应您的整体模式。

Answer 2

解决此问题的一种方法是将子视图的所有提取添加到列表中，然后onChangeSubview 遍历它们并执行中止，例如

this.fetches.forEach(function(fetchXhr) { 
    fetchXhr.abort(); 
}); 

或者如果你想用下划线的方式来做

_.invoke(this.fetches, 'abort');

您甚至可以将此功能放在您扩展的基本视图中，以便将其中的一些抽象出来。