Polymer dom-repeat not reflecting changes in array

Question

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

Answer 1

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.