将子视图附加到正文/其他元素

Question

我正在用Ember构建一个popover / dropdown，它基本归结为：

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

一切正常，但我在页面上有其他元素绝对定位，由于它们形成了新的堆叠上下文，我无法将popover显示在它们上面。

如果这是普通的旧Javascript，我会将popover附加到身体上，就像Bootstrap does with the container option一样，但我们在Ember AFAICT中没有那种控制水平。

我能想到的唯一解决方案是在应用程序模板中使用{{outlet}}并对其进行渲染，但这意味着对于每个popover / dropdown，我必须将内容拆分为不同的视图/模板/控制器并在路由器中有一个动作，看起来相当复杂！

有人能想到更好的选择吗？

Answer 1

似乎有效的一种方法是分离didInsertElement上的body元素，然后在willDestroyElement上手动销毁：

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

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

这似乎工作正常，但可能存在潜伏的错误！