聚合物1和Firebase:如何使用dom-repeat处理大型数据集? [英] Polymer 1 and Firebase: How to deal with a large dataset with dom-repeat?

问题描述

因此，我正在使用firebase-query读取大约9000个项目的数据集.

So, I am using firebase-query to read a dataset of about 9000 items.

然后，我将显示带有dom-repeat(具有各种过滤和排序选项)的项目列表.

Then I am displaying the list of items with dom-repeat (with all sorts of filtering and sorting options).

当我用10个左右的项目进行测试时，一切都很好，但是现在我正在读取完整的数据集，我不知道如何管理它……显示了整个9000个项目，这显然不是很容易管理

It all worked well when I tested it with 10 items or so, but now that I am reading the full dataset I have no idea how to manage it... the entire 9000 items are displayed, which obviously is not quite manageable.

这是我所拥有的简化版本:

Here is a simplified version of what I have:

<firebase-query path="/organisations" data="{{organisations}}"></firebase-query>

<template is="dom-repeat" id="table" items="{{items}}" as="item" filter="filterList" sort="{{sortList(sortKey)}}" initial-count=20>
     [[item.name]]<br />
</template>

从哪里开始处理大量数据?某种分页或延迟加载?如果我理解正确，那么无论如何都会从Firebase加载9000个项目，因此，以一种不会破坏浏览器的方式显示它们(我已经完成了-杀死它...)

Where do I start in order to deal with a large amount of data? Some sort of pagination, or lazy-loading? If I understand correctly, the 9000 items are loaded from Firebase anyway, so it's a matter of displaying them in a way that doesn't kill the browser (which I've done - killing it...)

推荐答案

您可以按照@Niklas的建议使用iron-list.这是一个好方法.但是，如果您热衷于使用dom-repeat，那么下面的示例可能会有所帮助:

You may use iron-list as @Niklas suggested. And it is a good way. But if you are keen to use dom-repeat than here below example may help :

<iron-scroll-threshold on-lower-threshold="loadMoreData" lower-threshold="10" scroll-target="document" lower-triggered="{{nearBottom}}">
<template is="dom-repeat" items="{{items}}" sort='showLastItemOnTop' rendered-item-count="{{renItemCount}}">
     [[item.name]]<br />
</template>
</iron-scroll-threshold>

<template is="dom-if" if="[[nearBottom]]">
      <paper-progress indeterminate></paper-progress>
      <div>Loading...</div>
</template>
....
static get properties() { return { 
dataLimit:{
    type:Number,
    value:10
}    }}
....
_loadData() {
        var db = firebase.database();
        var dashRef = db.ref('organisations').limitToLast(this.dataLimit);
        dashRef.on('value', snap => { 
        if (snap.exists()) {
            this.set('items', Object.values(snap.val()));
        }

        });

}
loadMoreData(){
                this.dataLimit += 10;
                this._loadData();
        }
}

• 假设您将添加上面使用的所有依赖项.实时示例为: https://www.jobijoy.com/wall
• Assuming you will add all dependencies used above. Live example is : https://www.jobijoy.com/wall

这篇关于聚合物1和Firebase:如何使用dom-repeat处理大型数据集?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！