выполнить действие (функция javascript) после отображения шаблона ember

Question

У меня очень маленькая веб-страница с emberjs, где я хочу показать для них список элементов и открытые карты и другую карту для выбранного элемента. Нечто подобное:

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

Там нет никаких проблем, чтобы отобразить карту для списка:

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

и у меня есть действие в контроллере элемента, который выполняется при открытии выбранного элемента, но если я пытаюсь создайте карту элементов там (в действии контроллеров) она терпит неудачу (afaik, потому что в этот момент в DOM нет такого div). Итак, если я могу выполнить действие или свою функцию после того, как div уже добавляет в DOM, он должен работать. И вопрос будет, как выполнить что-то после того, как шаблон добавлен в DOM, или это совершенно неправильный способ сделать такие вещи (чем то, что было бы правильным способом ember)?

Answer 1

Не могу сказать много с просмотром полного кода. Но для выполнения некоторого кода после визуализации DOM вы планируете функцию на очереди цикла afterRender.

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

Но если вам действительно нужно коснуться DOM, я рекомендую вам обернуть свой код карты в компонент. Компонент получает didInsertElement, где вы можете написать код инициализации карт.

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