Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer dom-repeat not reflecting changes in array

I am trying to use a dom repeat template with a custom element wrapping highcharts (https://github.com/avdaredevil/highcharts-chart). It is mostly working except when the data gets changed the charts do not reflect it.

The dom-repeat template:

  <template id="scenarioCharts" is="dom-repeat" items="{{chartOptions}}" as="chartOption">
    <highcharts-chart highchart-options="{{chartOption}}" />
  </template>

The Polymer code to build chartOptions (which is a property with notify true):

observers: [
  'buildChartOptions(scenarios)',
],
buildChartOptions(scenarios) {
  var i = 0;
  this.set('chartOptions', []);
  for (i = 0; i < scenarios.length; i += 1) {
    this.push('chartOptions', buildCustomChartOptions(scenarios[i]));
  }
},

If I remove the line this.set('chartOptions', []); the dom-repeat keeps the old ones and adds the new charts. I have also tried a lot of different things with splices and notifySplices but have had no luck producing the desired result which is the old charts being replaced by the new ones.

Thanks

like image 543
Michael Velez Avatar asked Oct 29 '22 14:10

Michael Velez


1 Answers

I would refer to the same bug mentioned by tony19.

Your code seems to be a good workaround, though I'd probably create a local array, populate it and set it again, like this:

buildChartOptions(scenarios) {
  var newArray = [];
  for (var i = 0; i < scenarios.length; i += 1) {
    newArray.push(buildCustomChartOptions(scenarios[i]));
  }
  this.set('chartOptions', newArray);
}

Another alternative would be to push your changes to the array and then force the dom-repeat to render, by doing a this.$.scenarioCharts.render();. You'd need to try it though, I'm not sure it would work:

buildChartOptions(scenarios) {
    for (var i = 0; i < scenarios.length; i += 1) {
        this.push('chartOptions',buildCustomChartOptions(scenarios[i]));
    }
    this.$.scenarioCharts.render();
}

Additionally, even though it does not concern your question, I would recomend declaring a function in polymer like this:

buildChartOptions: function(scenarios) { }

instead of

buildChartOptions(scenarions) { }

I sometimes forget and do the same you did, and the result is compatibility issues with Internet Explorer or Firefox... However if you do as suggested, everything will work fine.

like image 107
mauro1855 Avatar answered Nov 09 '22 14:11

mauro1855