javascript - polymer dom-repeat 不反射(reflect)阵列的变化

Question

我正在尝试使用带有自定义元素的 dom 重复模板包装 highcharts ( https://github.com/avdaredevil/highcharts-chart )。它大部分都在工作，除非数据发生变化，图表不会反射(reflect)它。

dom-repeat 模板:

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

要构建的 Polymer 代码 chartOptions (这是一个带有 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]));
  }
},

如果我删除行 this.set('chartOptions', []); dom-repeat 保留旧图表并添加新图表。我还用 splices 尝试了很多不同的东西。和 notifySplices但没有运气产生预期的结果，即旧图表被新图表取代。

谢谢

Answer 1

我会引用 tony19 提到的同一个错误。

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

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();
}

此外，即使它不涉及您的问题，我也建议在 polymer 中声明一个函数，如下所示:
buildChartOptions: function(scenarios) { }
代替
buildChartOptions(scenarions) { }
我有时会忘记并做与您相同的操作，结果是与 Internet Explorer 或 Firefox 的兼容性问题……但是，如果您按照建议进行操作，一切都会正常工作。