Google chart rendering in Ember.js

Question

Hey please can any one help me to solve this problem. my View is

<div id="sankey_multiple" style="width: 900px; height: 300px;"></div>

my Component.js is

App.sankeyComponent = Ember.Component.extend({
    needs: ['sankey'],
    //navigation: Ember.computed.alias('controllers.navigation'),
    isExpandedBookmarks: false,
    didInsertElement: function() {
       alert('insert');
    }
});

But didInsertElement function is not working I am not getting where exactly I need to add the google chart scripts.

If I add it in init function it says container not found. So I thought we need to add after didInsertElement. But its not working. Can any one help me out in this ? thank you in advance.

Answer 1

Ember expects the naming convention for components to have a leading capital, so you should change your component as follows:

App.SankeyComponent = Ember.Component.extend({
    needs: ['sankey'],
    //navigation: Ember.computed.alias('controllers.navigation'),
    isExpandedBookmarks: false,
    didInsertElement: function() {
       alert('insert');
    }
});

Also, I am not sure whether the view you posted is the view where you are trying to consume your component or the view for your component itself. These should be set up as possible:

The definition for your component:

<script type="text/x-handlebars" id="components/sankey-component ">
    <!-- HTML for your component -->
</script>

Show the component in a view as follows:

{{sankey-component}}