app-indexeddb-mirror with Polymerfire

Question

複数のタブを持つ簡単なページを作成しました。各タブは、Firebaseからの記事のフィード（コレクション/リスト）を読み込み、ページ上のカードをレンダリングします。私が訪問したフィードをindexeddbに保存しようとするまで、すべてがうまくいきます。app-indexeddb-mirrorです。

は、ここに私がやったことだ：

<dom-module id="my-view1"> 
<template> 
    <style include="shared-styles"> 
    </style> 

    <paper-tabs id="tabs" 
       attr-for-selected="value" 
       selected="{{selectedFeed}}" 
       scrollable> 
     <template is="dom-repeat" 
        items="[[feeds]]" 
        as="feed"> 
      <paper-tab value="[[feed.key]]">[[feed.name]]</paper-tab> 
     </template> 
    </paper-tabs> 

    <firebase-query id="[[selectedFeed]]_feed" 
        app-name="myfirebaseapp" 
        path="/myfirebaseappdb/feed/[[selectedFeed]]" 
        data="{{articles}}"> 
    </firebase-query> 

    <app-indexeddb-mirror 
      key="[[selectedFeed]]" 
      data="[[articles]]" 
      persisted-data="{{persistedArticles}}"> 
    </app-indexeddb-mirror> 

    <template is="dom-repeat" 
       items="[[persistedArticles]]" 
       as="article"> 
      <paper-card image="[[article.image]]" alt="image"> 
       <div class="card-content"> 
        <h1 class="card-text">[[article.title]]</h1> 
        <h4 class="card-text">[[article.abstract]]</h4> 
       </div> 
      </paper-card> 
    </template> 

</template> 

<script> 
    Polymer({ 
     is: 'my-view1', 
     ready: function() { 
      this.feeds = [ 
       {name: "Feed1", key: "feed1"}, 
       {name: "Feed2", key: "feed2"}, 
       {name: "Feed3", key: "feed3"}, 
       {name: "Feed4", key: "feed4"} 
      ]; 
     } 
    }); 
</script> 

私は何をしたいのエントリ（キーと値などのデータとしてフィード名）としてindexeddbにキャッシュそれぞれを供給されるので、彼らはすることができアプリがオフラインのときに読み込まれます。それは基本的にはapp-indexeddb-mirrorのためですね。

は、しかし、私はfirebase-queryとapp-indexeddb-mirror間のデータフローの周りに頭を得ることができない、と私はindexeddbエントリは、タブを切り替えるときに空/上書き得続けます。

私は正しいことをしていますか？ありがとう。

Answer 1

firebase-queryとapp-indexeddb-mirrorを入れ替えてこの問題を解決しました。 Polymerで配列の問題を知りませんでしたが、この順序もかなり直感的です。