Polymer 1 和 Firebase：如何使用 dom-repeat 处理大型数据集？

Question

所以，我正在使用 firebase-query 读取大约 9000 项的数据集。

然后我显示带有 dom-repeat 的项目列表（带有各种过滤和排序选项）。

当我用 10 个左右的项目对其进行测试时一切正常，但现在我正在阅读完整的数据集我不知道如何管理它...显示了整个 9000 个项目，这显然不是非常易于管理。

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

<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>

要处理大量数据，我应该从哪里入手？某种分页或延迟加载？如果我理解正确的话，这 9000 个项目无论如何都是从 Firebase 加载的，所以以一种不会杀死浏览器的方式显示它们是一个问题（我已经做到了 - 杀死它......）

Answer 1

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

<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

Polymer 1 和 Firebase：如何使用 dom-repeat 处理大型数据集？

Polymer 1 and Firebase: How to deal with a large dataset with dom-repeat?

firebase

firebase-realtime-database

polymer-1.0

polymerfire

dom-repeat