Firebase 延迟加载

neh*_*hel 1 javascript firebase firebase-security firebase-realtime-database

我正在尝试延迟加载 firebase 项目,以便稍后在用户到达 div 容器末尾时加载更多项目。当我删除.endAt().startAt()收到 15 个项目时,尽管它们没有增加并且它卡在这 15 个项目上。

当我保持.endAt()并且.startAt()我收到火力警告时, Using an unspecified index. Consider adding ".indexOn": "title" at /items即使.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"
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

安全规则

{
  "rules": {
    ".read": true,  
    ".write": "auth != null",  
    "users":{
      "$uid": {
        ".write": "$uid === auth.uid"
        "items":{
          ".indexOn": "title",
          "$itemId": {
            "title": {".validate": "...}
            "type": {".validate": "...}
            }
          }
        }
      }
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

延迟加载的代码结构

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;
}
Run Code Online (Sandbox Code Playgroud)

Fra*_*len 6

您误解了 Firebase 查询的工作方式。最容易查看是否使用硬编码值:

firebase.database().ref('items')
    .orderByChild('title')
    .startAt(0)
    .endAt(14)
    .limitToFirst(15)
Run Code Online (Sandbox Code Playgroud)

没有带有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()); });
Run Code Online (Sandbox Code Playgroud)

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

要实现分页,您必须记住上一页的最后一项并将其传递给下一个调用:startAt(titleOfLastItemOnPreviousPage, keyOfLastItemOnPreviousPage)