3

Polymerfire と Polymer App Toolbox テンプレートを使用して、データを Firebase にプッシュしようとしています。

  • my-app.html構成されたコンポーネントが含まれています<firebase-app>。
  • my-models.htmlmy-app.html(ルートで構成されたページ)<add-model>コンポーネントが含まれています
  • <add-model><firebase-query>、<firebase-auth>、入力、送信ボタンのあるフォームです。

  • <firebase-query>オブジェクトで次の関数を使用してデータをプッシュしようとしていadd-model.html Polymerます:

    Polymer({
    is: 'add-model',
    properties: {
        data: {
            type: Object
        }
    },
    create: function() {
       this.$.query.ref.push({
           name: this.$.myModelName.value
        });
    }
});

    結果

  • リターンpushでの<firebase-query>オブジェクトの呼び出し(この Q/Aで説明されています。私たちの場合は、適切に宣言されていないように見えるためです)。add-model.htmlCannot read property 'push' of undefined<firebase-app>

  • <firebase-app>からファイルに移動すると関数は機能しますが、Firebase の機能がmy-app.html失われます。add-model.htmlpushmy-app.html
  • <firebase-app>my-app.html と add-model.html の両方を呼び出すと戻りますUncaught Error: Firebase App named 'firebase-app' already exists.
  • <firebase-auth>で動作しadd-model.html、オブジェクトを返し[[user]]ます。

ルートからfirebase-query適切に通信するにはどうすればよいですか?firebase-app

4

3 に答える 3

5

TLDR:解決策は、(そのファイルで使用されているすべての要素でなくても)宣言polymerfire/polymerfire.htmlと同じファイルにインポートすることです。<firebase-app>

my-app.htmlおそらくインポートします（ Polymerfirepolymerfire/firebase-app.htmlからの他のインポートはありません）。my-models.htmlおそらくとのみをインポートします。これらがそのファイルで使用される唯一の Polymerfire 要素であると仮定しますpolymerfire/firebase-query.html。polymerfire/firebase-auth.html

原因を特定しました (ただし、根本的な原因とは限りません)。polymerfire.htmlの宣言と同じファイルに がインポートされていない場合に症状が発生します<firebase-app>。

polymerfire.htmlすべての Polymerfire 要素に見られるプロパティPolymer.FirebaseCommonBehaviorを定義するを含む、Polymerfire からすべての要素をインポートします。Firebase SDK では、オブジェクトを適切に設定するために、初期化のapp前にすべての Polymerfire 要素をインポートする必要があると思います。そうしないと、初期化時に undefinedになり、そのプロパティの初期化が妨げられ、Polymerfire 要素のメソッドを使用しようとするとランタイム エラーが発生します。の場合、表示されるエラーは次のようになります。appappfirebase-queryapp.databaserefthis.$.query.ref.push(...)

Uncaught TypeError: Cannot read property 'push' of undefined
于 2017-01-03T19:08:38.293 に答える
1

私は、上記の答えを見つけて、そのお金で Polymerfire/polymerfire.html をインポートしました。さらに、私の特定のアプリは、すべての import 要素と firebase 要素が配置されている正確な場所について非常にうるさいことを付け加えておきます。ほとんどのポリキャスト (上記の #58 など) は、非常に簡単で、簡単に正しく処理できるように見えます。この特定のものは、スコープや可視性、または私が理解できなかったその他の問題のために、要素とインポートが配置されている場所について多くの実験を行いました。

これが私がいたのと同じ状況で他の誰かを助けることを願っています.

また、2018 年以降の訪問者は、それまでに改善される可能性が高いため、この投稿が時代遅れであることに気付くでしょう。

于 2017-01-04T03:01:50.697 に答える
1

私にとって重要なのは、内部firebase-appにある WebComponents の残りを宣言する前に宣言することでした。デバッグ中に、要素自体で宣言される前に、子 WebComponents の firebase プロパティが設定されていることに気付きました。firebase-queryfirebase-documentfirebase-app

これは私のために働いた順序です：

<firebase-app
    name='someName'
    auth-domain="xxx.firebaseapp.com"
    database-url="xxx.firebaseio.com/"
    api-key="my-api-key">
</firebase-app>

queryそして、これを使用する、または使用する必要があるすべての要素は、次のdocumentようになります。

<some-component>
...
   <firebase-document
       app-name='someName'
       id="query"
       path="/app/firstName"
       data="{{testFirstName}}">
   </firebase-document> 
...
</some-component>
于 2017-04-14T08:40:51.677 に答える