複数のタブを持つ単純なページを作成しました。各タブは、Firebase から記事のフィード (コレクション/リスト) を読み込み、ページにカードをレンダリングします。indexeddb
訪問したフィードをwithに永続化しようとするまで、すべてが思い通りに機能し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
私が正しくしていないことがありますか?ありがとう。