This addon provides a component that allows for rendering a block in a DOM element somewhere else on the page. It's inspired by ember-wormhole, but written using Octane idioms and leveraging the Ember helper in-element.
- Ember.js v3.20 or above
- Ember CLI v3.20 or above
- Node.js v10 or above
ember install ember-simple-wormhole
<div id="destination-elem">
{{!-- Text will appear here --}}
</div>
<EmberSimpleWormhole @to="destination-string">
<p>This text is rendered in "destination-string"</p>
</EmberSimpleWormhole>
<div id="destination-elem"></div>
<EmberSimpleWormhole @to="destination-string" @renderInPlace={{true}}>
<p>This text is rendered in "destination-string"</p>
{{!-- Text will appear here --}}
</EmberSimpleWormhole>
The destination element must be in the DOM when the wormhole component is invoked, otherwise it will not be found. For use cases such as a modal that could be triggered on multiple routes, consider placing the destination element in the application template to ensure it will always be present.
If multiple EmberSimpleWormhole
s have the same destination element, content from each wormhole will be appended to the destination and will not override any existing markup.
This component does not render inside FastBoot, as it's not possible to query the DOM to get the destination element.
Option | Type | Description |
---|---|---|
@to | String/Element | The element into which the inner block should be rendered |
@renderInPlace | Boolean | Instead of rendering the inner block in another element, it's rendered in line. Note: this overrides the @to argument |