场景：
我目前正在使用 Polymer 的“firebase-collection”元素将数据绑定到谷歌图表。用户可以选择他们想要在谷歌图表中显示的项目，点击按钮后，firebase 将使用用户选择的内容更新数据，并内置到谷歌图表中。
问题：
我遇到的问题是在firebase更新我的数据属性之前调用了我的“buildChartData”方法。我想在数据从firebase返回后调用它，但我唯一能找到的是“on-change”事件。因此，每次数据更新时都会调用我的“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>