Appending child view to body / other element

Question

I'm building a popover/dropdown with Ember which essentially boils down to:

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

All works fine but I have other elements on the page which are absolutely positioned and due to them forming a new stacking context there's no way I can make the popover be displayed above them.

If this were plain old Javascript, I'd append the popover to the body much like how Bootstrap does with the container option but we don't have that level of control in Ember AFAICT.

The only solution I can think of is to use an {{outlet}} in the application template and render to that, but that means for every popover/dropdown I have to split the contents out to a different view/template/controller and have an action in the router which seems rather over-complicated!

Can anyone think of a better option?

hey @rlivsey, have you figured out a solid solution for that problem? I have a similar use case and don´t know how to solve it. — tomraithel

rlivsey rlivsey · Accepted Answer · 2013-05-30T21:15:51

One approach that seems to work is to detach the body element on didInsertElement and then manually destroy on willDestroyElement:

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

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

This appears to work fine, but there are probably bugs lurking!

Appending child view to body / other element

1 Answers