This addon provides a component that allows for rendering a block
to a DOM element somewhere else on the page. The component retains typical Ember
context in terms of bound data and action handling. Ember Wormhole is
compatible with Ember FastBoot as of version
0.4.0, so long as the destination element is part of Ember's own templates.
This library is particularly useful for cases where you have UI that is the logical child of
a component but needs to render as a top-level DOM element, such as a confirmation dialog.
This component tracks its element's child nodes. When inserted into the DOM, it appends
its child nodes to a destination element elsewhere. When removed from the DOM, it
removes its child nodes, so as not to orphan them on the other side of the wormhole.
Nothing else changes -- data binding and action bubbling still flow according to
the Ember component hierarchy. That includes usages of yield, so blocks provided
to ember-wormhole simply appear in another part of the DOM.
Show Me Some Code!
We thought you'd never ask...
Given the following DOM:
<!-- Destination must be in the same element as your ember app --><!-- otherwise events/bindings will not work --><divid="destination"></div><divclass="ember-view"><!-- rest of your Ember app's DOM... --></div></body>