Question

以下代码应从我的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数据库中获取数据并将其绑定到纸卡元素？

Answer 1

尝试这样的事情：

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));
    });
  }
});

您的模板正在迭代myFeed.datas，因此您需要将Firebase数据附加到myFeed.datas而不是my-feed.data。我不知道my-feed.data会做什么......变量名中的破折号看起来像语法错误。

您希望datas元素上的my-feed成为数组属性，并且您需要使用myFeed.splice()函数来管理它。在我的示例中，我正在使用splice和concat做一些有点花哨的东西，但它很好地拼接出阵列中的任何现有数据并用新数据替换它。 splice()技巧可以很好地保持对象同步。

数据绑定帮助程序元素无法获取Firebase数据

1 个答案: