2017-05-31 10 views
1

私はポリマーとfirebaseを使ってWebアプリケーションを作成しています。データベースのリストを取得するには、polymerfireの "firebase-query"要素を使用しています。firebase-query要素がデータを更新するのを防ぐ方法

今、データベースから取得しているアイテムのリストは、人々が私のアプリケーションに投稿している投稿です。今、私はこのようなfirebase-query要素があります。

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

を、私は内容の多くを掲示する人々の束を持っている場合、私は、今、この

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

のような記事を表示するdom-repeatテンプレートタグを持っています一度に、このリストは毎秒更新され、読みにくいでしょう。

firebase-query要素が初期ロードが完了したら更新を停止し、特定の関数を呼び出すと再び更新されないようにする手段はありますか?

無効な属性を追加しようとしましたが、data属性(私の場合は{{posts}})の中にあるものを削除するだけなので、無効にすると何も表示されません。

答えて

1

私はfirebase-queryに精通していませんが、あなたは単純なトリックを行うことができます。プロパティpostsセットobserver機能に。

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

は、jsの中で、あなたは、例えば、私は設定デバウンス機能を定義する10 000ミリ秒(10秒)と私はtemplateでレンダリングされますcurrentPostsプロパティにthis.postsを設定し、いくつかのコールバック関数と呼ばれることができます。

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)

+0

ようなことを行います私はこれを含む関数を作ってみました: this.set(「currentPosts」、this.posts) が、DOMリピートテンプレートが更新されませんでした... – dshukertjr

関連する問題