在 ember 模板渲染后执行操作（javascript 函数）

Question

I have very small web page with emberjs, where I want to show some item list and openlayers map for them, and another map for selected item. Something like that:

<script type="text/x-handlebars" id="list">
<div class="list">
    <div id="list_map"></div>
</div>
{{outlet}}
</script>

<script type="text/x-handlebars" id="list/item" >
<div class="item">
    <div id="item_map"></div>
</div>
</script>
<script>
function showListMap() {
    listMap = new ol.Map({target:'list_map'});
}
function showItemMap() {
    itemMap = new ol.Map({target:'item_map'});
}
</script>

There is no problem to display map for list:

model: function(params) {
        var content = [];
        var url = 'http://localhost:8080/app/list'; 
        $.ajax({
          url: url,
          success: function(surveys) {            
            content.pushObjects(surveys);
            showListMap();
          }
        });
        return content;
}

and I have action in item controller that is executed, when opening selected item, but if I try to create item map there (in controllers action) it fails (afaik because there is no such div at that moment in DOM). So if I could execute action or my function after div is already add to DOM, it should work. And question would be, how to execute something after template is added to DOM, or that's completely wrong way to do such stuff (than what would be correct ember way)?

Answer 1

I can't say much with seeing full code. But to execute some code after the DOM is rendered you schedule a function on the the run loops afterRender queue.

Ember.run.scheduleOnce('afterRender', this, function() {
  //The div should be available now.
});

But if you really need to touch the DOM I recommend you wrap your map code in a component. A component gets a didInsertElement where you can write your maps initialization code.

var component = Em.Component.extend({
  setup: function() {
    //Do you map init here.
  }.on('didInsertElement')
});

Answer 2

There unfortunately isn't a really good route or controller hook that fires off after a page has already rendered. I believe the reason for this is that the developers of Ember think it is an anti-pattern to directly talk to the DOM.

That being said, I think it sometimes is quite handy for complex UI on otherwise static web pages. If you want to do some sort of jquery or use the DOM API after a route has rendered, you can do the following in your route file (as @Dainius correctly points out)

routeName.js

import Route from '@ember/routing/route'; 
import jQuery from 'jquery';

export default class myRouteFile extends Route {

  manipulateDom = function() {
     $("#myDiv").css( "color", "red" );
  }

  init() {
    this._super(...arguments)
    Ember.run.scheduleOnce('afterRender', this, this.manipulateDom)
  }
}