带有 Polymerfire 的 app-indexeddb-mirror

Question

我构建了一个包含多个选项卡的简单页面。每个选项卡加载来自 Firebase 的文章提要 (collection/list) 并在页面上呈现卡片。一切都按我想要的方式工作，直到我尝试将访问过的提要保存到 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 条目 overwritten/emptied。

有没有我做的不对？谢谢。

Answer 1

我通过交换 firebase-query 和 app-indexeddb-mirror 解决了这个问题。我从来不知道顺序在 Polymer 中很重要，而且这个顺序很违反直觉。

带有 Polymerfire 的 app-indexeddb-mirror

app-indexeddb-mirror with Polymerfire

offline-caching

polymer

firebase-polymer

firebase-realtime-database

polymerfire