Polymer + Firebase (Polymerfire)：<firebase-query> 在单页应用程序视图中不起作用（<firebase-app> 位于 my-app.html 中）

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
        });
    }
});

结果

在 add-model.html returns Cannot read property 'push' of undefined 中的 <firebase-query> 对象上调用 push（，在我们的例子中这是因为 <firebase-app> 似乎没有正确声明）。
将 <firebase-app> 从 my-app.html 移动到 add-model.html 文件确实使 push 功能起作用，但随后 my-app.html 失去了它的 Firebase 功能。
在 my-app.html 和 add-model.html returns Uncaught Error: Firebase App named 'firebase-app' already exists.

<firebase-app>

<firebase-auth> 在 add-model.html 和 returns 一个 [[user]] 对象中工作。

如何使 firebase-query 从我的路线与 firebase-app 正确通信？

Answer 1

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

您的 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, which defines the app property seen in all Polymerfire elements. I'm guessing the Firebase SDK requires all Polymerfire elements imported before app initialization in order to populate the app object appropriately. Otherwise, when firebase-query initializes, app.database will be undefined, which prevents its 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 年或之后的访客会发现此 post 已过时，因为到那时它似乎可能会得到改进。

Answer 3

对我来说，关键是先声明 firebase-app，然后再声明其中包含 firebase-query 或 firebase-document 的其余 WebComponents。在调试过程中，我意识到子 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 中）

Polymer + Firebase (Polymerfire): <firebase-query> not working inside single page app view (with <firebase-app> located in my-app.html)

firebase

polymer

firebase-realtime-database

polymer-starter-kit

polymerfire

结果