3

我正在尝试使用 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>对象（在此 Q/A 中进行了解释，在我们的例子中是因为似乎没有正确声明）。add-model.htmlCannot read property 'push' of undefined<firebase-app>

  • <firebase-app>从文件移到文件确实使该my-app.html功能起作用，但随后失去了其 Firebase 功能。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可能进口polymerfire/firebase-app.html（而不是来自 Polymerfire 的其他进口）；并且my-models.html可能只导入polymerfire/firebase-query.htmland polymerfire/firebase-auth.html，假设这些是该文件中使用的唯一 Polymerfire 元素。

我已经确定了原因（但不一定是根本原因）。当polymerfire.html没有在与<firebase-app>.

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

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

我发现上面的答案是直接导入polymerfire/polymerfire.html。此外，我要补充一点，我的特定应用程序对每个导入和 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 回答