搜索或筛选大型数据集,使其不会感觉 UI 被短暂冻结



我想为用户找到在Ember中快速、平稳地过滤大型数据集的最佳解决方案。

下面是一个在2500个名字的列表中进行短暂锁定搜索的例子。例如,尝试以"a"开头进行搜索。

http://jsbin.com/ulukep/26/edit

(如果解决方案使用https://github.com/emberjs/list-view)

让它感觉慢的不是搜索/过滤,而是实际呈现结果。Ember列表视图是一个很好的解决方案,很容易将其添加到您的示例中。

添加成员列表视图库和所需的css:

<script src="http://builds.emberjs.com/list-view/list-view-latest.js"></script>
<style>
.ember-list-view {
  overflow: auto;
  position: relative;
}
.ember-list-item-view {
  position: absolute;
}
</style>

将模板中的手把{{each}}块替换为成员列表视图,仍然使用view.filteredList作为内容:

{{#collection Ember.ListView contentBinding="view.filteredList" height=100 rowHeight=20 width=500}}
  {{name}}
{{/collection}}

就是这样。现在以"A"开头的搜索以闪电般的速度返回,没有任何锁定。请在此处尝试:http://jsbin.com/ulukep/27

最新更新