Polymer: запуск метода после обновления firebase-collection

Question

Сценарий:

В настоящее время я использую элемент Polymer "firebase-collection" для привязки данных к гугл-чарту. Пользователь может выбрать, какие элементы он хочет отобразить на диаграмме Google, и после нажатия кнопки данные будут обновлены с помощью FireBase в соответствии с тем, что было выбрано пользователем, и встроены в диаграмму Google.

Эта проблема:

Проблема, с которой я сталкиваюсь, заключается в том, что мой метод buildChartData вызывается до того, как firebase обновит мое свойство данных. Я хотел бы, чтобы он вызывался после того, как данные возвращаются из базы данных, но единственное, что я могу найти, - это события "при изменении". Таким образом, мой метод buildChartData вызывается каждый раз, когда обновляются данные, что может быть более ста раз для одной диаграммы.

Код:

    <dom-module id="chart-example">
      <template>
        <style>
        ...
    </style>
    <firebase-collection id="fbColl"
      location="{{ref}}"
      data="{{dataPoints}}"
      on-data-change="buildChartData"  <!-- This is calling every time data updates-->
      ></firebase-collection>


      <template is="dom-repeat" items="{{dataPoints}}">
        <p>{{item.STABBR}}</p>
      </template>
      <google-chart id="exampleChart"
                              type="{{chartType}}"
                              options="{}"
                              data="{{chartData}}" >
      </google-chart>

        <paper-button raised on-tap="buildChart">
           Build Chart 
           <iron-icon icon="arrow-forward">
           </iron-icon>
        </paper-button>

    </template>
    <script>
    (function() {
    'use strict';

    Polymer({
      is: 'chart-example',

      properties: {
        baseRef: {
          type: String,
          value: '',
          notify: true
        },
        ref: {
          type: String,
          value: '',
          notify: true
        },
        chartType: {
          type: String,
          Value: 'pie',  // for testing purposes
          notify: true
        },
        chartData: {
          type: Object,
          notify: true
        },
        firebaseNode: {
          type: String,
          value: 'rates',
          notify: true
        }
      },
      buildRef: function(baseRef) {
        return baseRef + this.firebaseNode 
      },
      buildChartData: function(e) {
        console.log(e)
        console.log(this.dataPoints)
      },
      buildChart: function() {
        this.ref = this.buildRef(this.baseRef)
        console.log(this.dataPoints)
      },
    });
  })();
  </script>
</dom-module>

Answer 1

Вы пытались использовать debounce() функционировать?

Пример Debounce