Question

我正在尝试使用dom repeat模板和自定义元素包装highcharts（https://github.com/avdaredevil/highcharts-chart）。它主要起作用，除非数据发生变化时图表不能反映出来。

dom-repeat模板：

Observable

要构建<template id="scenarioCharts" is="dom-repeat" items="{{chartOptions}}" as="chartOption"> <highcharts-chart highchart-options="{{chartOption}}" /> </template>的Polymer代码（这是一个带有notify true的属性）：

chartOptions

如果删除行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])); } },，dom-repeat会保留旧行并添加新图表。我还尝试了this.set('chartOptions', []);和splices的许多不同的事情，但没有运气产生所需的结果，旧的图表被新图表取代。

由于

Answer 1

我会参考tony19提到的同一个bug。

您的代码似乎是一个很好的解决方法，但我可能会创建一个本地数组，填充它并再次设置它，如下所示：

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

另一种方法是将更改推送到数组，然后通过this.$.scenarioCharts.render();强制执行dom-repeat渲染。你需要尝试一下，我不确定它会起作用：

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

此外，即使它不涉及您的问题，我也建议在聚合物中声明一个函数，如下所示：

buildChartOptions: function(scenarios) { }

而不是

buildChartOptions(scenarions) { }

我有时会忘记并做同样的事情，结果是Internet Explorer或Firefox的兼容性问题...但是如果按照建议执行，一切都会正常工作。

聚合物dom-repeat不反映阵列的变化

1 个答案: