Следующий код должен получить данные из моей базы данных Firebase и отобразить их в моей бумажной карточке Polymer. Но привязка, похоже, не работает.
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-feed">
<template>
<style>
:host {
display: block;
padding: 10px;
}
paper-card{
width:100%;
}.top{
margin-top: 8px;
}
</style>
<style is="custom-style">
.header { @apply(--paper-font-headline); }
</style>
<paper-card>
<div class="card-content">
<div class="header">Welcome to Nam Kaalai</div>
<p>
Nam Kaalai is an online platform for you to sell and buy native
breed cattle and their milk products all without the need for you
to leave your room. However, you should note that this is a platform
for you to negotiate with the dealers and we do not make arrangements
for you to get the cattle and their products to your home.
</p>
</div>
</paper-card>
<paper-card class="top">
<div class="card-content">
<div class="header">The Market</div>
<p>
Thinking of selling your native breed cattle? The members of the Nam Kaalai community are eager to buy your cattle.
So why wait, sell your cattle to people who want it and help conserve their progeny.
</p>
<paper-textarea id="cattleInfo"label="Tell us about your cattle." char-counter maxlength="145">
</paper-textarea>
<paper-input id="placeInfo" label="Where do you live with your cattle?">
<iron-icon icon="communication:location-on" prefix></iron-icon>
</paper-input>
<paper-input id="priceInfo" label="Price" always-float-label auto-validate pattern="[0-9,','," "]*" error-message="Only numbers are allowed!">
<div prefix>Rs. </div>
</paper-input>
<paper-input id="contactInfo" label="Contact: Email, phone or social links">
<iron-icon icon="communication:email" prefix></iron-icon>
</paper-input>
</div>
<div class="card-actions">
<h5>Upload a photo of your cattle (Only one)<h5>
<!--uplod image-->
<input type="file" value="upload" id="fileUpload" on-change="upld"/>
</div>
</paper-card>
<!--Toast to notify of upload-->
<paper-toast id="toast" text="Information about your cattle has been uploaded!"></paper-toast>
<template is="dom-repeat" id="menu" items="{{datas}}">
<paper-card>
<div class="card-content">
<p>{{item.cattleInfo}}</p>
<p>{{item.placeInfo}}</p>
<p>{{item.priceInfo}}</p>
<p>{{item.contactInfo}}</p>
</div>
</paper-card>
</template>
Polymer({
is: 'my-feed',
properties: {
datas: {
type: Array,
value: []
}
},
attached: function() {
var myFeed = this;
var uploadsRef = firebase.database().ref('cattle/data');
uploadsRef.on('value', function(snap) {
var data = _.map(snap.val(), function (item, key) {
item.key = key;
return item;
});
myFeed.splice.apply(myFeed, ['datas', 0, myFeed.length].concat(data));
});
},
//Gets information and photo and posts them into firebase database &
//storage.
upld: function(a) {
//Get image
var file = a.target.files[0];
//create a storage reference
var storageRef = firebase.storage().ref('images/' + file.name);
//store the image
var task = storageRef.put(file);
//Upload info to RDB
var cattleInfo = this.$.cattleInfo.value;
var placeInfo = this.$.placeInfo.value;
var priceInfo = this.$.priceInfo.value;
var contactInfo = this.$.contactInfo.value;
task.on('state_changed', null, null, function() {
var downloadURL = task.snapshot.downloadURL;
firebase.database().ref('cattle/data').push().set({
cattleInfo: cattleInfo,
placeInfo: placeInfo,
priceInfo : priceInfo,
contactInfo : contactInfo,
downloadURL: downloadURL
});
});
//show toast that upload is successful
this.$.toast.open();
//Clearing the input fields
this.$.cattleInfo.value = "";
this.$.placeInfo.value = "";
this.$.priceInfo.value = "";
this.$.contactInfo.value = "";
}
});
Как получить данные из базы данных Firebase и привязать их к элементу бумажной карты?