Хобрук: Ваш путь к мастерству в программировании

Вспомогательный элемент привязки данных не работает для получения данных Firebase

Следующий код должен получить данные из моей базы данных 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 и привязать их к элементу бумажной карты?


  • Вы смотрели элемент firebase? 01.08.2016
  • @Ben Я посмотрел на это, но не знаю, как это реализовать. Вы можете помочь мне? 01.08.2016
  • @Ben Но это для старой версии Firebase... 01.08.2016

Ответы:


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 было свойством Array для вашего элемента my-feed, и вы захотите использовать функцию myFeed.splice() для управления им. Я делаю что-то немного необычное со склейкой и конкатом в моем примере, но он отлично справляется с объединением любых существующих данных из массива и заменой их свежими данными. Трюк splice() отлично справляется с синхронизацией объекта.

02.08.2016
  • Я только что загрузил весь свой html-код, пожалуйста, помогите мне... Это очень срочно. 02.08.2016
  • Спасибо за помощь! 03.08.2016
  • Новые материалы

    Учебные заметки JavaScript Object Oriented Labs
    Вот моя седьмая неделя обучения программированию. После ruby ​​и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript. В отличие от ruby, javascript — это более..

    Разбор строк запроса в vue.js
    Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать. В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..

    Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨‍💻
    «Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..