0

Edit: found the answer here: Using Ember.js, how do I run some JS after a view is rendered?

In the mapView

didInsertElement: function() {
  this._super();
  map_initialize();
},

*********** original post ****************

I'm pretty new to js and am trying ember.js.

I am trying to use the google maps api to show a map. Normally you should initialize the map with 

<body onload="map_initialize()">

but as the map div that will receive the map is part of an ember view template it is not yet in the DOM when the function is called.

console.log(document.getElementById("map_canvas"));

returns false.

I then placed the initialization function in my map view so that could call it from an event tied to the map div itself. This way it is impossible to call map_initialize() before the div is loaded.

<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>

this works perfectly. When the page loads, I can click on the map div and then the map is loaded.

My question is, how can I get this event to be called automatically after the div is added to the DOM

<div id="map_canvas" style="width:100%; height:100%" onload="initialize()"></div>

has no effect (the map_initialize() function is not called).

I have also tried to do this via ember with

<div id="map_canvas" style="width:100%; height:100%" {{action "map_initialize" on="load"}}></div>

but this also does nothing.

What is the correct event name?

Thanks

Community
  • 1
  • 1
CHsurfer
  • 1,304
  • 1
  • 15
  • 34

1 Answers1

4

Override didInsertElement() on the view (and probably call this._super() inside, calling the function you just shadowed).

You can also listen to changes to the DOM, such as DOMNodeInserted or DOMSubtreeModified, but that would include any change

sandstrom
  • 14,554
  • 7
  • 65
  • 62