Firebase 2.x + Polymer 1.x：从 CDN 加载 Polymerfire 并获取数据答案

【问题标题】：Firebase 2.x + Polymer 1.x: Loading Polymerfire from CDN and fetching dataFirebase 2.x + Polymer 1.x：从 CDN 加载 Polymerfire 并获取数据
【发布时间】：2016-11-16 13:22:50
【问题描述】：

我想使用polymerfire 元素来获取https://dinosaur-facts.firebaseio.com/dinosaurs 的数据并在dom-repeat 元素中显示数据。

我做错了什么？我该如何正确地做到这一点？

Here is the jsBin.

http://jsbin.com/zeyimotasa/1/edit?html,控制台,输出

<!doctype html>
<head>
  <meta charset="utf-8">
  <!-- Source: https://github.com/Download/polymer-cdn -->
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/">
  <!--- ->
  <base href="https://polygit.org/components/">
  <!--- ->
  Toggle below/above as backup when server is down
  <!--- ->
  <base href="https://polygit2.appspot.com/components/">
  <!---->
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="polymerfire/polymerfire.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
</head>
<body>

<dom-module id="x-element">

<template>
  <style></style>

  <p>
    <paper-button on-tap="_handleClick">Click Me</paper-button>
  </p>
  <!---->
    <firebase-document
      path="https://dinosaur-facts.firebaseio.com/dinosaurs"
      data="{{dinosaurs}}"
      >
    </firebase-document>
    <template is="dom-repeat" items="[[dinosaurs]]">
      [[item.order]]
    </template>
    <template is="dom-repeat" items="[[test]]">
      [[item]]
    </template>
  <!---->

</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        dinosaurs: Array,
        test: {
          value: function() {
            return ['foo', 'bar', 'baz'];
          }
        },
      },
      _handleClick: function() {
        console.log('You clicked me!');
      }
    });
  })();
</script>

</dom-module>

<x-element></x-element>

</body>

【问题讨论】：

首先您缺少firebase-document 的导入。会是firebase-element/firebase-document.html
奇怪的是，如果您使用 test 而不是 dinosaurs 并使用属性 log 在 firebase-document 中打开详细信息，您会得到此日志 Query does not exist。没有使用过firebase，所以我不知道这意味着什么。希望对你有帮助
@a1626：您能否提供一个指向您的 jsBin 的链接？我无法按照您描述的方式进行导入。谢谢。
here's 垃圾桶

标签： firebase polymer firebase-realtime-database firebase-polymer polymerfire

【解决方案1】：

要获取数组/集合形式的数据，您需要使用<firebase-query> 元素，而不是<firebase-document>。您还需要使用<firebase-app> 初始化您的应用程序：

<firebase-app api-key="XXX" database-url="yyy" auth-domain="zzz"></firebase-app>
<firebase-query path="/dinosaurs" data="{{dinosaurs}}"></firebase-query>

<template is="dom-repeat" items="[[dinosaurs]]">
  <!-- ... -->
</template>

【讨论】：

【解决方案2】：

您需要 <firebase-app> 来初始化 Firebase 应用程序，不是吗？

【讨论】：

您能分享一个 jsBin 或 CodePen 来解释您的想法吗？