Ember组件被覆盖而不是重复

Question

我是新手，并且遇到了一些问题。我正在使用我在Stack Overflow上的其他地方找到的修改过的图表组件。我的改变是使用和ID而不是类，所以希望我可以有多个图。

组分/高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();
  }
});

模板/组件/高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'),
});

模板/组件/高chart.hbs

<div class="chart></div>

Answer 2

Mateusz Nowak带领我找到解决方案，在这里：

import Ember from 'ember';

export default Ember.Component.extend({
  setId: function() {
    this.set('elementId', this.get('elementId'));
  }.on('init'),

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

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

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

  willDestroyElement: function () {
    this.removeObserver('series');
    this.removeObserver('options');
    this.$().find('.chart').highcharts().destroy();
  }
});