【问题标题】:How to use Polymerfire to fetch data from a Firebase如何使用 Polymerfire 从 Firebase 获取数据
【发布时间】:2016-12-17 21:54:35
【问题描述】:

说明

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

如果可能的话,请在你的回答中加入一个工作演示,如果你指出一些好的文档作为the current documentation is insufficient,请加分。

预期结果

我希望the demo page 看起来像:

点击我

鸟臀目

富吧巴兹

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

“你点击了我!”

“三角龙”

“{出现:-68000000,高度:3,长度:8,顺序:“鸟臀目”,消失:-66000000,重量:11000}”

实际结果

the demo page 看起来像:

点击我

富吧巴兹

当按下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>

【问题讨论】:

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


    【解决方案1】:

    您首先需要包含&lt;firebase-app&gt; 来初始化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

    【讨论】:

      猜你喜欢
      • 2017-03-25
      • 1970-01-01
      • 1970-01-01
      • 2019-06-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-23
      • 1970-01-01
      相关资源
      最近更新 更多