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

在加载组件时，请继续并初始化图形：

<强> component.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')
});

<强> component.hbs

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

带图表的EmberJS组件

1 个答案: