Компонент 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}} 

Когда пользователь щелкает подтверждения, я использую функцию обратного вызова JQuery предоставленный Highcharts для создания графика для контейнера. Это очень хаки, но я не могу понять, где я должен поставить логику для этого обратного вызова 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}}