#82 Wormhole

Emad Ibrahim
Sep 26, 2016 · 1 min read

You might need your component to render its component somewhere else in the DOM and in that case, you can use the ember addon ember-wormhole.

Why would you ever need that? One case that comes to mind is rendering modal windows or notifications or other elements that you might want rendered somewhere else on your page.

Here is an example DOM:

<body class="ember-application">
<!-- Destination must be in the same element as your ember app -->
<!-- otherwise events/bindings will not work -->
<div id="destination">
</div>
<div class="ember-view">
<!-- rest of your Ember app's DOM... -->
</div>
</body>

and a template:

{{#ember-wormhole to="destination"}}
Hello world!
{{/ember-wormhole}}

That will render “Hello world!” inside the div with id “destination”. You can also pass an element directly instead of the id.

See more examples and options on the github page.


Originally published at Ember Daily Tips.

Emad Ibrahim

Written by

Husband, Father of Twins, Published Author, Entrepreneur, Passionate Technologist, Programmer and Productivity Nut. more at https://about.me/eibrahim