2

I built a simple page that has multiple tabs. Each tab loads a feed (collection/list) of articles from Firebase and renders cards on the page. Everything works as I wanted until I tried to persist the visited feeds into indexeddb with app-indexeddb-mirror.

Here's what I did:

<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>

What I want to do is cache each feed into indexeddb as an entry (feed name as key and the data as value), so they can be loaded when the app is offline. That's basically what app-indexeddb-mirror is for, right?

However I cannot get my head around the data flow between firebase-query and app-indexeddb-mirror, and I keep getting indexeddb entry overwritten/emptied when switching tabs.

Is there something I am not doing right? Thanks.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Xiang
  • 136
  • 1
  • 4
  • When the data from the `firebase-query` changes, the `app-indexeddb-mirror` will cache the data. This means that when you switch tabs, the data will change because the `path` on the `firebase-query` changes which will in turn cause the `app-indexeddb-mirror` element to re-cache the data. – Ben Thomas Sep 26 '16 at 14:37
  • I hooked a couple observers to print logs and it sure did look like @BenThomas you said. I still cannot figure out how to do this the right way? Can you please shed some light on this? Thanks. – Xiang Sep 27 '16 at 00:28
  • Once selectedFeed changes, wouldn't it also change the key of app-indexeddb-mirror immediately (data bindings are synchronous)? In that case the cache with previous key should not be cleared/emptied right? – Xiang Sep 27 '16 at 00:36
  • Yes, I would have expected it to store against the different keys like you said. Maybe this is a bug? – Ben Thomas Sep 27 '16 at 08:33

1 Answers1

0

I solved this issue by swapping firebase-query and app-indexeddb-mirror. I never knew sequence matters in Polymer, also this order is quite counter-intuitive.

Xiang
  • 136
  • 1
  • 4