如何使用 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