从 Polymer Element 访问 Firebase

Accessing Firebase from Polymer Element

我正在开发一个使用 Polymer 和 Firebase 的应用程序。我想弄清楚如何从我的自定义元素访问我的 Firebase 文档。目前,我有一个这样定义的视图:

<body>
  <template is="dom-bind" id="dialog">
    <firebase-document location="https://my-app.firebaseio.com/" data="{{ orders }}"></firebase-document>

    <iron-pages attr-for-selected="data-route" selected="{{route}}">
      <section data-route="home">
        <h3>Hello</h3>
      </section>

      <section data-route="orders">
        <h3>Orders</h3>
        <user-orders orders="{{ orders }}"></user-orders>
      </section>
    </iron-pages>      
  </template>  
</body>

user-orders 元素定义如下:

<dom-module id="user-orders">
  <template>
    <template is="dom-repeat" items="[[ orders ]]" as="order">
      <div>[[ order.date ]]</div>
      <div>[[ order.status ]]</div>
      <div>[[ order.description ]]</div>
    </template>

    <button on-click="test">Test</button>
    <button>Add New Order</button>
  </template>

  <script>
    Polymer({
      is: "user-orders",
      properties: {
        orders: {
          type: Array,
          notify: true,
          value: function() {
            return [];
          }
        }
      },

      test: function() {
        alert(JSON.stringify(this.orders));
      }
    })
  </script>
</dom-module>

与我的路线关联的视图显示正确。但是,当我单击 "Test" 按钮时,会出现一个 alert window,上面写着 null。就像 a) 我没有正确设置我的 firebase 连接,我不确定如何实际确认或 b) 我的数据绑定设置不正确。

我做错了什么?

您使用的是全新的 Firebase 应用还是现有的 Firebase 应用?没有任何数据的全新 Firebase 应用程序将 return null