javascript - Ember 组件被覆盖而不是重复

Question

我是 Ember 新手，遇到了一些问题。我正在使用在 Stack Overflow 上其他地方找到的修改后的图表组件。我的改变是使用 和 ID 而不是类，这样我就可以拥有多个图表。

组件/high-chart.js

import Ember from 'ember';

export default Ember.Component.extend({
  options: null,
  series: null,
  id: null,

  setId: function() {
    if(this.get('id') === null) {
      this.set('id', 'chart');
    }
  }.on('init'),

  updateSeries: function () {
    this.initializeChart();
  },

  initializeChart: function () {
    var chart = this.get('options');
    chart.series = this.get('series');
    Ember.$('#' + this.get('id')).highcharts(chart);
  },

  didInsertElement: function () {
    this.initializeChart();
    this.addObserver('series', this, this.updateSeries);
    this.addObserver('options', this, this.updateSeries);
  },

  willDestroyElement: function () {
    this.removeObserver('series');
    this.removeObserver('options');
    Ember.$('#' + this.get('id')).highcharts().destroy();
  }
});

模板/组件/high-chart.hbs

<div {{bind-attr id=id}}></div>

这是我尝试显示多个图表的模板。

模板/交易/index.hbs

<h1>Transactions</h1>
<h2>Maximum</h2>
{{high-chart options=options series=maximumSeries id='maximum-chart'}}

<h2>Minimum</h2>
{{high-chart options=options series=minimumSeries id='minimum-chart'}}

<h2>Average</h2>
{{high-chart options=options series=averageSeries id='average-chart'}}

<h2>Median</h2>
{{high-chart options=options series=medianSeries id='median-chart'}}

我已将数据集的创建抽象为 Mixin。但我认为列出来不会有帮助。数据集显示了我想要的数据，但要渲染的最后一个数据集会替换唯一渲染的图表上的数据。

import Ember from 'ember';
import HighChartTransactionsMixin from '../../mixins/high-chart-transactions';

export default Ember.ArrayController.extend(HighChartTransactionsMixin, {
  maximumSeries: function() {
    return this.makeSeriesByTransactions(this, 'maximum');
  }.property('@each', 'sortedTransactionResults.@each.runResultStartTime'),

  minimumSeries: function() {
    return this.makeSeriesByTransactions(this, 'minimum');
  }.property('@each', 'sortedTransactionResults.@each.runResultStartTime'),

  averageSeries: function() {
    return this.makeSeriesByTransactions(this, 'average');
  }.property('@each', 'sortedTransactionResults.@each.runResultStartTime'),

  medianSeries: function() {
    return this.makeSeriesByTransactions(this, 'median');
  }.property('@each', 'sortedTransactionResults.@each.runResultStartTime')
});

此处呈现的页面:

页面来源。我注意到 div id=chart 可能是我的问题的根源，但我不知道这个 id 从哪里来，也不知道如何在我的 Ember 组件中更改它。

Answer 1

为什么你需要在唯一元素中包含唯一元素？

import Ember from 'ember';

export default Ember.Component.extend({

  setId: function() {
    this.set('elementId', this.get('id'));
  }.on('init'),

  initializeChart: function () {
    var chart = this.get('options');
    chart.series = this.get('series');
    this.$().find('.chart').highcharts(chart);
  }.on('didInsertElement'),
});

模板/组件/high-chart.hbs

<div class="chart></div>