Question

我尝试使用Polymerfire和Polymer App Toolbox模板将数据推送到Firebase：

my-app.html包含已配置的<firebase-app>组件。
my-models.html（在my-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>的{{1}}对象上拨打add-model.html会返回Cannot read property 'push' of undefined（explained in this Q/A，在我们的情况下会因为{{{} 1}}似乎没有被正确声明）。
将<firebase-app>从<firebase-app>移至my-app.html文件会使add-model.html功能正常工作，但push会失去其Firebase功能。
在my-app.html和add-model.html中调用my-app.html会返回<firebase-app>
Uncaught Error: Firebase App named 'firebase-app' already exists.在<firebase-auth>中有效并返回add-model.html个对象。

如何让[[user]]与我的路线firebase-query正确沟通？

Answer 1

TLDR：解决方案是将polymerfire/polymerfire.html（即使不是该文件中使用的所有元素）导入与<firebase-app>声明相同的文件中。

您的my-app.html可能导入polymerfire/firebase-app.html（并且没有其他来自Polymerfire的导入）; my-models.html可能只导入polymerfire/firebase-query.html和polymerfire/firebase-auth.html，假设这些是该文件中唯一使用的Polymerfire元素。

我已经确定了原因（但不一定是根本原因）。如果polymerfire.html未在与<firebase-app>声明相同的文件中导入，则会出现症状。

polymerfire.html从Polymerfire导入所有元素，包括Polymer.FirebaseCommonBehavior，它定义了所有Polymerfire元素中看到的app属性。我猜测Firebase SDK需要在app初始化之前导入所有Polymerfire元素，以便恰当地填充app对象。否则，当firebase-query初始化时，app.database will be undefined会阻止其ref property from initializing，当您尝试使用Polymerfire元素的方法时会导致运行时错误。在this.$.query.ref.push(...)的情况下，看到的错误是：

Uncaught TypeError: Cannot read property 'push' of undefined

Answer 2

我发现上面的答案导入了Polymerfire / polymerfire.html的钱。另外我要补充一点，我的特定应用程序非常非常挑剔，确切地说每个import和firebase元素的位置。大多数polycast（例如上面引用的＃58）看起来非常简单易懂。由于范围或可见性或我从未想过的其他问题，这个特别的元素和元素和进口的位置进行了大量的实验。

希望这可以帮助其他人处于我所处的相同状态。

我还打赌，2018年或之后的访客会发现这篇文章已经过时，因为到那时它似乎有可能得到改善。

Answer 3

对我而言，关键是在声明其余内部有firebase-app或firebase-query的WebComponents之前声明firebase-document。在调试过程中，我意识到子WebComponents的firebase属性是在firebase-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>

Polymer + Firebase（Polymerfire）：<firebase-query>在单页应用视图中无效（<firebase-app>位于my-app.html中）

结果

3 个答案: