2

我正在使用 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}}在应用程序模板中使用并渲染它，但这意味着对于每个弹出框/下拉菜单，我必须将内容拆分到不同的视图/模板/控制器并在路由器中执行操作这似乎过于复杂！

谁能想到更好的选择？

4

1 回答 1

0

一种似乎可行的方法是分离 body 元素didInsertElement，然后手动销毁willDestroyElement：

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

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

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

于 2013-05-30T21:15:51.800 回答