How to prevent firebase-query element to updating the data

Question

I am using polymer and firebase to create a web app. To get a list in the database, I am using the "firebase-query" element of polymerfire.

Now, the list of items I am getting from the database is posts that people are posting on my app. Now I have the firebase-query element like this:

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

and I have dom-repeat template tag to display the posts like this

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

Now, if I have bunch of people posting a lot of contents at once, this list would be updating every second, and it would be hard to read.

Is there a way to prevent firebase-query element to stop updating once the initial load is complete, and possibly updating again when I call a certain function?

I tried to add a disabled attribute, but that just deletes whatever is inside the data attribute ({{posts}} in my case), so when disabled is set, nothing shows up on the screen.

Answer 1

I am not familiar with firebase-query, but you can do simple trick. On property posts set observer function.

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

then in js you can define debounce function where I set, for example, 10 000 miliseconds (10 seconds) and called some callback function where I set this.posts to currentPosts property which will be rendered in template.

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

and html template will be like:

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

documentation to debounce: https://www.polymer-project.org/1.0/docs/api/Polymer.Base#method-debounce

If you like to do it in different way like update data whenever user presses update, it's really easy now for you. Just set on-tap on some button and then in function you will do something like this.set("currentPosts", this.posts)