Polymer + Firebase (Polymerfire)：无法读取未定义的属性“push”：“this.$.query.ref.push(...)”

Question

我正在使用 Polymer App Tool Kit（使用聚合物 CLI 启动）关注Polymer + Firebase tutorial video。

当我尝试将数据推送到 Firebase 集合时，我收到以下错误：

Cannot read property 'push' of undefined'

这是我的代码（firebase 应用在 my-app.html 中启动，名称为“firebase-app”）：

<dom-module id="add-model">
    <!-- Defines the element's style and local DOM -->
    <template>
        <firebase-auth user="{{user}}" app-name="firebase-app"></firebase-auth>
        <firebase-query
                app-name="firebase-app"
                id="query"
                path="/users/[[user.uid]]/models"
                data="{{model}}">
        </firebase-query>
        <paper-input id="modelName" label="Model Name" "></paper-input>
        <paper-button class="create" id="create" on-tap="create" raised>Create</paper-button>
    </template>
    <!-- Creates the element's prototype and registers it -->
    <script>
        Polymer({
            is: 'add-model',
            properties: {
                data: {
                    type: Object
                }
            },
            create: function() {
               this.$.query.ref.push({
                   name: this.$.modelName.value
                });
            }
        });
    </script>
</dom-module>

Answer 1

首先，我建议将您的代码与Polycast #58 source in GitHub 进行比较，这可能会更清楚地向您揭示问题。

this.$.query.ref (<firebase-query>.ref) 指的是Polymer.FirebaseDatabaseBehavior 的ref 属性，即computed 与：

__computeRef: function(db, path) {
  if (db == null ||
      path == null ||
      !this.__pathReady(path) ||
      this.disabled) {
    return null;
  }

  return db.ref(path);
},

注意db.ref(path) never returns null，所以ref 是null 必须是if 语句的结果。评估每个条件可能会发现问题：

• db == null

  • 此属性是来自app.database() (never returns null) 的computed，或者在未定义app 时设置为null（由<firebase-app> 定义）。在导入使用<firebase-query> 的元素之前，您是否使用正确的app-name 声明了<firebase-app>？

• path == null

  • 您可能没有设置<firebase-query>.path。显然不是这样。

• !this.__pathReady(path)

  • 其中一个路径组件可能是空字符串或未初始化。对于您的路径 (/users/[[user.uid]]/models)，可能尚未定义 user（用户尚未登录），这会导致该路径组件 (/users//models) 中出现空字符串。

• this.disabled

  • 您可能设置了<firebase-query>.disabled。显然不是这样。