Backbonejs 在单击集合标题时呈现集合答案

【问题标题】：Backbonejs rendering collection upon click on collection titleBackbonejs 在单击集合标题时呈现集合
【发布时间】：2017-01-30 18:42:43
【问题描述】：

我仍在使用backbonejs，因为我发现它非常容易和快速地引导新的基于微API的网站。

问题是关于在集合组单击时加载和呈现集合的最佳实践。

假设我有静态的品牌列表。在点击品牌时，我开始获取集合，并在获取结束后呈现集合。

当用户单击未处理上一次单击的品牌时会出现问题，因此会发生 2 个集合以及两个品牌的加载和渲染。为了“取消”或只是忽略第一次提取并仅呈现用户单击的最后一个，最好的处理方法是什么？

我发现解决方案只是在处理请求之前停用品牌列表，但这在用户体验方面很烦人，因为用户可能想立即点击另一个不等待结果的列表（例如，如果他未点击）

【问题讨论】：

当应用程序的每个部分都是组件时，Backbone 的效果最好。同时加载 2 个集合应该不会导致问题。不过，如果没有minimal reproducible example，我们无法判断您的解决方案。
另外，如果您想了解如何改进工作代码 sn-p 的提示，请查看codereview.stackexchange.com。

【解决方案1】：

从Backbone.fetch 返回的底层xhr 对象具有取消当前请求xhr.abort() 的能力。

当用户点击并获取集合时，保存返回值。

var xhr = myCollection.fetch()

xhr 具有告诉您当前请求状态的属性。

如果用户再次单击并导致集合在另一个请求仍在处理时获取，只需询问xhr 是否在请求中间。如果是，则中止并继续当前提取，并重新分配 xhr 对象。

示例代码：

function userClickedSomething(){
    if(xhr.readyState > 0 && xhr.readyState < 4)
        xhr.abort()
    xhr = myCollection.fetch()
}

如何存储对xhr 对象的引用取决于您。

【讨论】：

底层的 xhr 是一个 jqXHR，它暴露了 readyState，以便与 XMLHttpRequest 向后兼容。它实现了Promise 接口，该接口为检查请求的状态提供了更好的选择：.state()。它将返回要比较的字符串，而不是像 readyState 这样的幻数。