如何使用 Polymerfire 从 Firebase 获取数据

How to use Polymerfire to fetch data from a Firebase

描述

我的目标是使用 polymerfire 元素向 Firebase 端点发送请求以检测那里是否有数据，如果有，则检测其内容。

如果可能，请在您的回答中包含一个工作演示，如果您指出一些好的文档，请加分 the current documentation is insufficient。

预期结果

我希望 the demo page 看起来像：

CLICK ME

ornithischia

foo bar baz

并且当按下 点击我 按钮时，以下内容将出现在控制台中：

"You clicked me!"

"triceratops"

"{appeared: -68000000, height: 3, length: 8, order: "ornithischia", vanished: -66000000, weight: 11000}"

实际结果

the demo page 看起来像：

CLICK ME

foo bar baz

并且当按下 点击我 按钮时，控制台中实际出现以下内容：

"You clicked me!"

"triceratops"

"{}"

Live Demo

http://jsbin.com/fasovaxonu/1/edit?html,console,output 
<!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/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymerfire/polymerfire.html">
  <link rel="import" href="paper-button/paper-button.html">
</head>

<body>

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

<template>
  <style></style>
  
  <firebase-app name="my-app"
                auth-domain="dinosaur-facts.firebaseapp.com"
                database-url="https://dinosaur-facts.firebaseio.com/"
                >
  </firebase-app>
  
  <p>
    <paper-button on-tap="_onTap">Click Me</paper-button>
  </p>
  <!---->
    <firebase-query
      app-name="my-app"              
      path="https://dinosaur-facts.firebaseio.com/dinosaurs"
      data="{{dinosaurs}}"
      >
    </firebase-query>
    <firebase-document
      app-name="my-app"              
      path="https://dinosaur-facts.firebaseio.com/dinosaurs/triceratops"
      data="{{triceratops}}"
      >
    </firebase-document>
  
    [[triceratops.order]]
  
    <br /><br />
  
    <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'];
          }
        },
      },
      _onTap: function() {
        console.log('You clicked me!');
        console.log('triceratops', JSON.stringify(this.triceratops));
      }
    });
  })();
</script>
 
</dom-module>

<x-element></x-element>

</body>

您首先需要包含 <firebase-app> 以初始化 firebase。 

<firebase-app 
 database-url="dinos-89701.firebaseio.com"
 api-key="AIzaSyDLkCy3RNC5uFomEjVsLUehpzKFDrfAplU"
 auth-domain="dinos-89701.firebaseio.com">
</firebase-app>

在此处获取您的 api-密钥：

https://console.firebase.google.com/project/YOUR_PROJECT/settings/general/

演示： http://jsbin.com/joxatuz/1/edit?html,console,output