Firebase延迟加载 [英] Firebase lazy load

问题描述

我试图延迟加载Firebase项目，以便稍后在用户到达div容器的末尾时加载更多的Firebase项目。当我删除 .endAt（）和 .startAt（）我收到15件物品，虽然他们不是当我继续 .endAt（）和 .startAt（）我收到firebase警告
使用未指定的索引。考虑在/ items 中添加.indexOn：title，即使设置了 .indexOn 。我被这个警告弄糊涂了。

Firebase结构

  {
items：{
-Kk6aHXIyR15XiYh65Ht：{
author：joe，
title：Product 1
}，
-Kk6aMQlh6_E3CJt_Pnq：{
author：joe，
title：Product 2
} 
}，
users ：{
RG9JSm8cUndpjMfZiN6c657DMIt2：{
items：{
-Kk6aHZs5xyOWM2fHiPV：-Kk6aHXIyR15XiYh65Ht，
-Kk6aMTJiLSF-RB3CZ-2：-Kk6aMQkw5bLQst81ft7 
，
uid：RG9JSm8cUndpjMfZiN6c657DMIt2，
username：joe
} 
} 
} 
  

安全规则

  {
rules：{
.read：true，
.write：auth！= null，
users：{
 $ uid：{
.write：$ uid === auth.uid
items：{$ b $.indexOn：title，
$ item ID：{
title：{.validate：...} 
type：{.validate：...} 
} 
} 
} 
} 
} 
} 
} 
  

延迟加载的代码结构

  let _start = 0，
 _end = 14，
 _n = 15; 
 
函数lazyLoadItems（）{
 firebase.database（）。ref（'items'）
 .orderByChild（'title'）
 .startAt（_start）
 .endAt（_end）
 .limitToFirst（_n）
 .on（child_added，snapshot => console.log（snapshot.val（）））; 
 _start + = _n; 
 _end + = _n; 
 
  

解决方案

您误解了Firebase查询工作。这是最容易看到，如果你使用硬编码的价值：

$ $ p $ firebase.database（）。ref（'items'）
.orderByChild（'title'）
.startAt（0）
.endAt（14）
.limitToFirst（15）
$ b $ title = 0 或 title = 14 ，所以查询不会匹配任何内容。

Firebase数据库查询与您订购的属性值相匹配。因此，当您通过 title 命令在 startAt 和 endAt 必须是标题。例如



  ref.child（'items'）
 .orderByChild（'title'）
 .startAt （Product 1）
 .endAt（Product 1）
 .limitToFirst（15）
 .on（child_added，function（snapshot）{console.log（snapshot.val （））;}）; 
  

请参阅此工作示例： http://jsbin.com/hamezu/edit?js,console

实现分页，你必须记住上一页的最后一项，并将其传递给下一个调用： startAt（titleOfLastItemOnPreviousPage，keyOfLastItemOnPreviousPage）。

I'm trying to lazy load firebase items to later on load more of them whenever user reaches end of div container. When i remove .endAt() and .startAt() i'm receiving the 15 items though they are not beeing incremented and it's stuck at these 15 items.

When i keep .endAt() and .startAt() i'm receiving firebase warning Using an unspecified index. Consider adding ".indexOn": "title" at /items even though .indexOn is set. I'm confused by that warning. Thanks in advance for any help.

Firebase structure

{
  "items" : {
    "-Kk6aHXIyR15XiYh65Ht" : {
      "author" : "joe", 
      "title" : "Product 1"
    },
    "-Kk6aMQlh6_E3CJt_Pnq" : {
      "author" : "joe",
      "title" : "Product 2"
    }
  },
  "users" : {
    "RG9JSm8cUndpjMfZiN6c657DMIt2" : {
      "items" : {
        "-Kk6aHZs5xyOWM2fHiPV" : "-Kk6aHXIyR15XiYh65Ht",
        "-Kk6aMTJiLSF-RB3CZ-2" : "-Kk6aMQkw5bLQst81ft7"
      },
      "uid" : "RG9JSm8cUndpjMfZiN6c657DMIt2",
      "username" : "joe"
    }
  }
}

Security rules

{
  "rules": {
    ".read": true,  
    ".write": "auth != null",  
    "users":{
      "$uid": {
        ".write": "$uid === auth.uid"
        "items":{
          ".indexOn": "title",
          "$itemId": {
            "title": {".validate": "...}
            "type": {".validate": "...}
            }
          }
        }
      }
    }
  }
}

Code structure for lazy load

let _start = 0,
    _end = 14,
    _n = 15;

function lazyLoadItems(){
  firebase.database().ref('items')
        .orderByChild('title')
        .startAt(_start)
        .endAt(_end)
        .limitToFirst(_n)
        .on("child_added", snapshot=> console.log(snapshot.val()));
  _start += _n;
  _end += _n;
}

解决方案

You're misunderstanding how Firebase queries work. It's easiest to see if you use hard-coded values:

firebase.database().ref('items')
    .orderByChild('title')
    .startAt(0)
    .endAt(14)
    .limitToFirst(15)

There is no item with title=0 or title=14, so the query doesn't match anything.

Firebase Database queries match on the value of the property you order on. So when you order by title the values you specify in startAt and endAt must be titles. E.g.

ref.child('items')
   .orderByChild('title')
   .startAt("Product 1")
   .endAt("Product 1")
   .limitToFirst(15)
   .on("child_added", function(snapshot) { console.log(snapshot.val()); });

See for the working sample of this: http://jsbin.com/hamezu/edit?js,console

To implement pagination, you'll have to remember the last item of the previous page and pass that in to the next call: startAt(titleOfLastItemOnPreviousPage, keyOfLastItemOnPreviousPage).

这篇关于Firebase延迟加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！