如何使用Polymerfire从Firebase获取数据

时间:2016-12-17 21:54:36

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

描述

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

如果你指出一些好的文件the current documentation is insufficient,请在你的答案中包括一个可行的演示和加分。

预期结果

我希望the demo page看起来像:

  

点击我

     

鸟臀

     

foo bar baz

当按下 CLICK ME 按钮时,控制台中会出现以下内容:

  

"你点击了我!"

     

"三角龙"

     

" {出现:-68000000,身高:3,身高:8,顺序:" ornithischia",消失:-66000000,体重:11000}"

实际结果

the demo page看起来像:

  

点击我

     

foo bar baz

当按下 CLICK ME 按钮时,控制台中实际显示以下内容:

  

"你点击了我!"

     

"三角龙"

     

" {}"

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>

1 个答案:

答案 0 :(得分:3)

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

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

在这里获取api-key:

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

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