Highcharts with Ember Components


I've never used [Ember Components](http://emberjs.com/guides/components/) before, so I wanted to try making something similar to my React Highcharts component in Ember. I wasn't quite a fan of the existing docs 

Mistake I made here: instead of using the global \$, this.\$ needs to be used to specifically get the component jquery object.

# Conclusion

Using the Ember.Component event cycle, I can manage the overall Highcharts instance fairly easily, and changes to the series data can be observed by using Ember.Observable. Really gets a lot of the crap out of the way.

# Method

Just the significant part here.

```js
App.ChartComponent = Ember.Component.extend({
  chartOptions: null,
  series: null,
  
  updateSeries: function () {
    // TODO: a better updateSeries
    this.initializeChart();
  },

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

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

  willDestroyElement: function () {
    console.log('willDestroyElement');
    this.removeObserver('series');
    $('.chart').highcharts().destroy();
  }
```

###didInsertElement

[didInsertElement](http://emberjs.com/api/classes/Ember.Component.html#event_didInsertElement) is kind of like React's [componentDidMount](http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount) to me, in that it runs after the component has been rendered and inserted into the DOM. Good place for me to do my Highcharts init stuff, I think.

###addObserver

[addObserver](http://emberjs.com/api/classes/Ember.Observable.html#method_addObserver) is something I guess doesn't have an equivalent thing in React, but in React your entire component is constantly listening for any property and state changes anyway, so you could say React already has a 'global observer'. In this case, I just hooked up my callback method to it so that when the 'series' property of my component gets changed (most likely from the parent), I can have the proper updating take place. Of course, my implementation of series updating just defers to completely reinitializing the chart, so you'll have to dig further into doing diffs of the series or something.

###willDestroyElement

Same as what I said about didInsertElement above, except componentWillUnmount in this case.

# Links

* [JSBin demo](http://emberjs.jsbin.com/datew/1/edit)

* [gist link](https://gist.github.com/kimagure/58c2d257a991cfaf0c9e)

-----


# Other remarks / Ember events compared to React lifecycle

If I had to put into a table what I thought were analogues between Ember Component events and React Component lifecycle, it would be something like this:

| Ember.js event| React lifecycle|
|--------|--------|
| [didInsertElement](http://emberjs.com/api/classes/Ember.Component.html#event_didInsertElement) | [ComponentDidMount](http://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount) |
| [willDestroyElement](http://emberjs.com/api/classes/Ember.Component.html#event_willDestroyElement) | [ComponentWillUnmount](http://facebook.github.io/react/docs/component-specs.html#unmounting-componentwillunmount) |
| [willInsertElement](http://emberjs.com/api/classes/Ember.Component.html#event_willInsertElement) | [componentWillMount](http://facebook.github.io/react/docs/component-specs.html#mounting-Componentwillmount) |
| [willClearRender](http://emberjs.com/api/classes/Ember.Component.html#event_willClearRender) | [componentWillUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-Componentwillupdate) |
| [parentViewDidChange](http://emberjs.com/api/classes/Ember.Component.html#event_parentViewDidChange) | ??? |

Small example of how you can just mount a React component inside of a Ember component: http://emberjs.jsbin.com/yogop/1/edit

Probably shouldn't take it from me, though.