使用 Ember.js 平滑地呈现大列表的一部分答案

【问题标题】：rendering part of a large list smoothly with Ember.js使用 Ember.js 平滑地呈现大列表的一部分
【发布时间】：2012-02-01 12:06:12
【问题描述】：

我正在寻找一种方法来平滑地呈现列表的大部分“部分”。现在列表很大，有 1.000 项。（测试集）我发现这个列表的渲染花费的时间最多。不是我正在做的排序和过滤。当我一次渲染/查看整个列表时，浏览器会锁定直到完成。

如何加快渲染速度？

我应该使用分页吗？有没有办法平滑地滚动列表，并且只渲染可见的列表的一部分。我应该听什么活动？示例代码？

【问题讨论】：

我正在寻找类似的东西，但尚未找到答案。这是一个指向大型列表过滤示例的链接 (jsbin.com/ulukep/26/edit)。我从我发现的另一个搜索/过滤器示例中将它一起破解，顺便说一句。
如果它使用github.com/emberjs/list-view :) 奖励积分 :)

标签： javascript ember.js

【解决方案1】：

我想发表评论而不是回答，但我没有代表（这似乎倒退）。总之，

首先，定义“巨大”列表。多少行？

其次，定义“渲染”。您只需要尽快吐出 HTML，还是需要生成数据绑定视图？

根据我的经验，生成 HTML 的最快方法是将字符串推送到数组，例如

var s=""; 
s.push("<table.."); 
$(body).append(s.join("")).

因此，如果您想要获得最佳性能，这就是您要走的路。您可以通过简单地覆盖 render() 方法来将此技术与 ember 视图一起使用。当然，您会丢失数据绑定，这是 ember 最酷的部分。如果您需要数据绑定，但仅在少数字段上，您可以通过使用 unbound 帮助程序关闭不需要的数据绑定来将性能提高到令人满意的水平：

{{unbound myfield}}

【讨论】：

我绝对需要绑定。我现在通过构建一个分页器 mixin 和一些简单的分页视图来修复它，这些视图以 50 块为单位显示列表（足以填满屏幕）现在一切都恢复正常了。
@Stephan 你能分享一下你是如何进行逐块渲染的吗？你是如何告诉 ember 一个一个渲染这些分页视图的？
我有一个带有可见数组的控制器。排序、过滤、分页等会改变可见数组的内容。可见数组由 1000 多个未可视化/渲染的项目内容数组构成。这种方式运行起来非常流畅。

【解决方案2】：

我在这个问题上花了很多时间，我发现的最佳答案是在滚动到列表项时动态加载它们。

ember-list-view 用于列表

ember-table 用于表格

希望这对某人有所帮助。

【讨论】：

【解决方案3】：

我还需要为表格添加过滤和排序功能。我创建了大数组的一个子集。可见的。在屏幕上可以看到“duh”。它只有 50 行左右，而且速度非常快。无论如何，一次渲染 1000 行或更多行都是愚蠢的。注意使用 {{unbound myfield}} 有很大帮助。

所以排序和过滤器是在大型未渲染数组上完成的。当对大数组进行排序和过滤操作时，可见数组会用一个小子集进行更新。这很顺利。

现在有大量的快速表格视图示例。

【讨论】：

你找到任何可以链接的例子了吗？