1

我正在使用聚合物和 firebase 来创建一个网络应用程序。为了在数据库中获取列表，我使用了 polymerfire 的“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}}在我的情况下），所以当禁用设置时，屏幕上不会显示任何内容。

4

1 回答 1

2

我不熟悉 firebase-query，但你可以做一些简单的技巧。关于属性posts集observer功能。

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

然后在 js 中，您可以在我设置的地方定义 debounce 函数，例如 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)

于 2017-05-31T07:35:49.263 回答