如何防止firebase-query元素更新数据

时间:2017-05-31 04:55:27

标签: firebase firebase-realtime-database polymer polymerfire

我正在使用聚合物和firebase来创建一个Web应用程序。要获取数据库中的列表,我使用" firebase-query"聚合物火焰的元素。

现在,我从数据库中获取的项目列表是人们在我的应用上发布的帖子。现在我有这样的firebase-query元素:

<firebase-query
  id="query"
  path="/posts"
  limit-to-last="15"
  data="{{posts}}">
</firebase-query>

我有dom-repeat模板标签来显示这样的帖子

<template is="dom-repeat" items="[[posts]]" as="post">
  <div>[[post.content]]</div>
</template>

现在,如果我有很多人一次发布大量内容,这个列表会每秒更新一次,而且很难阅读。

有没有办法阻止firebase-query元素在初始加载完成后停止更新,并在我调用某个函数时可能再次更新?

我尝试添加一个禁用属性,但这只删除data属性(我的情况下为{{posts}})内的任何内容,因此当设置为禁用时,屏幕上不会显示任何内容。 / p>

1 个答案:

答案 0 :(得分:2)

我不熟悉firebase-query,但你可以做一些简单的技巧。在属性posts上设置observer函数。

posts: {
 Type: Array,
 value: function(){return []},
 observer: "debouncePosts"
}

然后在js你可以定义去抖函数,我设置,例如,10 000毫秒(10秒)并调用一些回调函数,我将this.posts设置为currentPosts属性,将在template

debouncePosts: function(data) {
  this.debounce("debouncePost", function(){
    this.set("currentPosts", this.posts);
  }.bind(this), 10000)
}

和html模板将如下:

<template is="dom-repeat" items="[[currentPosts]]" as="post">
  <div>[[post.content]]</div>
</template>
去除文档:https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-debounce

如果您希望以不同的方式执行此操作,例如每当用户按下更新时更新数据,那么现在对您来说非常简单。只需点击某个按钮,然后在功能中,您将执行this.set("currentPosts", this.posts)

之类的操作