javascript - 带图的 EmberJS 组件

Question

我有一个 emberjs 组件，我希望用它来生成 Highcharts 图表。

例如，我希望能够执行 {{component-name xy_data=data}} 并使用该数据生成图表。

目前，我的组件模板很简单，看起来像

<button {{action "confirm"}}>Click again to confirm</button>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
{{yield}}

当用户单击确认时，我使用 Highcharts 提供的 jQuery 回调来生成容器的图表。这非常 hacky，但我不明白应该将这个 jQuery 回调的逻辑放在哪里。

例如，我是否将其放入使用该组件的每个路由的路由中？对于开发人员来说，记住这样做似乎很乏味。

有没有一种方法可以在 component.js 文件中设置一个根据传入模型内容进行更改的设置阶段？据我了解，有一个 setupController，但这不适用于组件。

Answer 1

只需在加载组件时初始化图表即可:

组件.js

import Ember from "ember";

export default Ember.Component.extend({
  confirmed: false,
  actions: {
    confirm: function() {
      var component = this;
      component.set("confirmed", true);
    }
  },
  initializeGraph: function() {
    var component = this;
    // code to initialize highcharts graph here
  }.on('didInsertElement')
});

组件.hbs

{{#if confirmed}}
  <highcharts graph>
{{else}}
  <button {{action "confirm"}}>Click again to confirm</button>
{{/if}}