0

描述

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

如果可能,请在您的回答中包含一个工作演示,如果您指出一些好的文档,因为当前文档不足,请加分。

预期结果

我希望演示页面看起来像:

点击我

鸟臀目

富吧巴兹

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

“你点了我!”

“三角龙”

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

实际结果

演示页面如下所示:

点击我

富吧巴兹

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

“你点了我!”

“三角龙”

“{}”

现场演示

http://jsbin.com/fasovaxonu/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/">
  <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>
4

1 回答 1

3

您首先需要包含<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

于 2016-12-17T22:40:56.527 回答