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

  结果

• 调用push上<firebase-query>的目标add-model.html回报率Cannot read property 'push' of undefined(在此Q/A解释说,在我们的情况下,这是因为<firebase-app>似乎没有被正确声明).

• 移动<firebase-app>从my-app.html到add-model.html文件确实让push功能工作,但后来my-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我的路线进行适当的沟通？

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定义app所有Polymerfire元素中所见属性的元素.我猜测Firebase SDK需要在app初始化之前导入所有Polymerfire元素才能正确填充app对象.否则,firebase-query初始化时,app.database将是未定义的,这会阻止其ref属性初始化,当您尝试使用Polymerfire元素的方法时会导致运行时错误.在这种情况下this.$.query.ref.push(...),看到的错误将是:

Uncaught TypeError: Cannot read property 'push' of undefined