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

因此，我使用firebase查询来读取大约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加载的，因此，以一种不会破坏我所做的浏览器的方式来显示它们是一个问题-破坏它…

你可以按照@Niklas的建议使用铁名单。这是一个好办法。但如果您热衷于使用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();
        }
}

假设您将添加上面使用的所有依赖项。例如：

---

如果您想延迟加载数据，您必须使用原始javascript从firebase加载数据，而不是使用firebase查询元素。在这种情况下，iron list元素没有用处。谢谢你，哈坎克，这太有帮助了！我做了一些测试，看起来效果不错。我现在正试图弄清楚如何在这个延迟加载的同时使用dom重复过滤器和排序，但我想这是一个单独的主题。