1

次のセットアップで Firebase と Polymer を使用しています。

Firebase データ

ご覧のとおり、user-id とリスト card-sets の下に複数のユーザーがいます。firebase push idこれは基本的に配列ですが、共同作業になる可能性があるため 、使用したいオブジェクトとして保存されます。ここに画像の説明を入力

ポリマーコード

Polymer では、dom-repeat を使用して項目を繰り返し処理しています (静止配列を使用している限り、これはうまく機能しました。

    <template is="dom-repeat" items="{{dataCardSet.card-items}}">
       <el-card-editor card-item="{{item}}"></el-card-editor>
    </template>

問題

知られているようにdom-repeat、配列が必要ですが、プッシュ ID を使用しているため、Firebase はオブジェクトを提供します。配列を使用して、オプションではなく Firebase に保存します (例: [0: abc, 1: def])。また、双方向のデータバインディングを維持する必要があります

試した解決策

(1)一方向データバインディング - 代替案 1

(2)一方向データバインディング - 代替案 2

(3)双方向データバインディング

前述のように、(1) と (2) はオプションではありません。(3) は実際には機能していますが、このソリューションを使用すると、サブプロパティを 1 つだけ更新すると、オブジェクト内のすべてのサブプロパティが更新されます。これにより、dom-repeat に要素の再初期化が強制されます。要素を使用している<paper-input>ため、1 つのキーを押すとフォーカスが失われます。

(4) また、(1) または (2) を使用してからサブプロパティに手動でバインドすることはできません。これは、動的インデックス (例: {{dataCardSet.card-items.index}}) を使用したバインディングを使用する方法がないためです。

(5) また、データ バインディングを動的に作成できないという同じ問題があるarray-selector内で使用しようとしました。dom-repeat

サポートが必要

dom-repeat を維持し、push-ID を使用して、双方向のデータバインディングを維持する方法が必要です。Firebase は宣伝されていますが、Polymer フレームワークを標準として使用していないため、実際には驚き、失望しています。

また、 GitHubのコードを使用した Rob Dodson によるこのPolycastは、これが簡単に機能するという印象を与えますが、コードを見ると、ビデオに示されているように配列とプッシュ ID が使用されています。

ご協力いただきありがとうございます！

4

1 に答える 1