使用筛选延迟加载项目

Lazy load items with filtering

本文关键字：项目延迟加载筛选更新时间：2023-11-27

我使用Backbone.js在页面上一次加载20个项目，当你向下滚动到底部时，会得到更多的项目，直到没有剩余的项目可以从服务器中获取。

同时，我希望在顶部有一个输入字段，当您键入名称时，它会过滤匹配的项。

问题是，如果你还没有滚动到底部并获取完整的集合，那么输入过滤器将只匹配页面上当前的项目。

在技术和视觉上，将UI过滤与延迟加载项目相结合的最佳解决方案是什么？

编辑：这里的真实场景是加载你所有的facebook好友，这可能非常慢，并将它们与其他api混合。我不想一次加载所有内容，因为体验被延迟了。

当用户进行搜索时，为什么不使用包含筛选器的fetch重置集合？

Collection.fetch（｛term:$（"#search"）.val（）｝）

如果您设置此集合的后端API端点，以通过术语params确定结果的范围，则您的集合将仅包含来自服务器的与用户输入匹配的结果。

您还可以将初始获取限制为用户输入的前3个字符，然后在他们继续键入时执行过滤客户端的其余部分。如果你的第一个电话没有限制搜索结果服务器端的话。