прилагая вид ребенка к телу/другой элемент

Question

Я строю поповер/выпадающий список с Эмбер, которая по существу сводится к:

<div class="popover"> 
    <span {{action showPopover}}>Click</span> 
    {{#if popoverShowing}} 
    <div class="popover-body">The popover body</div> 
    {{/if}} 
</div> 

Все работает нормально, но у меня есть другие элементы на странице, которые позиционированы абсолютно и из-за того, что они формируют новый контекст стекирования, я не могу заставить надписи отображаться над ними.

Если бы это был простой старый Javascript, я бы добавил popover к телу так же, как Bootstrap does with the container option, но у нас нет такого уровня контроля в Ember AFAICT.

Единственное решение, которое я могу придумать, - использовать в шаблоне приложения {{outlet}}, но это означает, что для каждого popover/dropdown мне нужно разделить содержимое на другой view/template/controller и действие в маршрутизаторе, которое кажется довольно сложным!

Может ли кто-нибудь подумать о лучшем варианте?

Answer 1

Один подход, который, кажется, работает, чтобы отделить элемент тела на didInsertElement, а затем вручную уничтожить на willDestroyElement:

didInsertElement: function() { 
    Ember.$("body").append(this.$()) 
}, 

willDestroyElement: function() { 
    this.$().remove() 
} 

Это, кажется, работает хорошо, но есть, вероятно, ошибки, скрывающиеся!