我的目标是使用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 按钮时,控制台中实际显示以下内容:
"你点击了我!"
"三角龙"
" {}"
<!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>
答案 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/