Edit: found the answer here: Using Ember.js, how do I start JS after rendering the view?
In mapView
didInsertElement: function() { this._super(); map_initialize(); },
*********** original post *****************
I am new to js and trying ember.js.
I am trying to use google maps to display a map. Normally you should initialize the map with
<body onload="map_initialize()">
but since the display of the div that the map will receive is part of the ember view template, it is not already in the DOM when the function is called.
console.log(document.getElementById("map_canvas"));
returns false.
Then I placed the initialization function in my map view so that it could be called from an event bound to the div itself. Therefore, it is not possible to call map_initialize () before loading the div.
<script type="text/x-handlebars" data-template-name="map" > <div id="map_canvas" style="width:100%; height:100%" {{action "map_initialize" on="click"}}></div> </script>
it works fine. When the page loads, I can click on the map div and then load the map.
My question is: how can I make this event fire automatically after adding a div to the DOM
<div id="map_canvas" style="width:100%; height:100%" onload="initialize()"></div>
has no effect (map_initialize () function is not called).
I also tried to do this via ember using
<div id="map_canvas" style="width:100%; height:100%" {{action "map_initialize" on="load"}}></div>
but it also does nothing.
What is the name of the correct event?
thanks