ember.js - ボディ/その他の要素に子ビューを追加する

Question

私は本質的に次のように要約するEmberでポップオーバー/ドロップダウンを構築しています:

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

すべて正常に動作しますが、絶対に配置されたページ上の他の要素があり、それらが新しいスタック コンテキストを形成するため、ポップオーバーをそれらの上に表示する方法がありません。

これが単純な古い Javascript である場合、 Bootstrap がcontainerオプションで行うのと同じように、ボディにポップオーバーを追加しますが、Ember AFAICT にはそのレベルの制御がありません。

私が考えることができる唯一の解決策は{{outlet}}、アプリケーション テンプレートで を使用してレンダリングすることですが、それは、すべてのポップオーバー/ドロップダウンに対して、コンテンツを別のビュー/テンプレート/コントローラーに分割し、ルーターでアクションを実行する必要があることを意味しますこれはかなり複雑すぎるようです。

誰でもより良いオプションを考えられますか?