Ember JS：延迟加载模型数据

Question

我正在尝试渲染具有超过1000 records的余烬模型数据。完成渲染部分将需要2分钟以上的时间。

因此，我有一个计划来对其进行优化。我想第一次加载第一个100 records。一旦它们结束，我就需要加载第二个100 records。

我该怎么做？

Answer 1

检索数据页面

概念是分页，取决于您的后端如何处理分页。但是在一般情况下，类似：

let result = this.store.query('post', {
  limit: 10,
  offset: 0
});

一旦由后端处理，将导致对关系数据库的查询，例如：

SELECT * FROM post LIMIT 10 OFFSET 0;

因此，您需要跟踪显示的当前页面。每次您要获取新页面时，只需将偏移量增加page * limit，其中page是当前页面索引。因此，page = 1时的下一个查询将是：

let result = this.store.query('post', {
  limit: 10,
  offset: 10 // 1 * 10
});

对于您的后端来说，返回总结果计数可能是个好主意，您可以通过JSON响应中的某种元数据键来访问（或者您希望这样做，因为这取决于您的后端说集合的方式）。这样，您就知道何时停止尝试获取下一页。

关于检索的UX

您将需要选择是否要进行简单的分页，它提供了一个next和previous按钮，用户可以单击它们来检索下一页/上一页。可能是使用查询参数管理页面的最佳UX，以便浏览器中的前进/后退按钮可以移动页面，刷新不会丢失页面。当没有任何一个方向可提取的页面时，您还应该禁用/启用上一个和下一个按钮。

专业人士

• 易于开发
• 用户永远不会失去自己的位置
• 因为一次只显示一页，所以没有内存/性能问题

缺点

• 用户必须单击按钮，并可能选择不/不知道如何使用

插件

• ember-cli-pagination

另一种选择是使用无限滚动（例如Facebook新闻提要）。您必须注意滚动位置，才能知道何时获取下一个视图（这需要围绕当前项目的大小进行数学运算）。另外，您可以评估查看端口中是否包含项目n-2或类似内容，然后预取下一页。

专业人士

• 用户从不考虑分页，而是继续轻松地查看新内容

缺点

• 返回页面更改/刷新页面很糟糕
• 可怕的搜索
• 需要非常注意显示的数据量，否则会导致内存过度消耗和性能下降。
• 由于必须处理滚动事件，查看端口检测等，因此更加难以编写

插件

• ember-in-viewport
• vertical-collection
• ember-infinity