Render a component outside of the template in EmberJS

I want to render a modal which is defined inside a template but this modal should be insert into the DOM outside of the template.

e.g.

my-list.hbs:

 <div>
    <button>Create item</button>
    {{#if creatingItem}}
      {{item-creation-modal}}
    {{/if}}
    <ul>
      {{#each items as |item|}}
        <li>{{item.name}}</li>
      {{/each}}
    </ul>
  </div>

Basically what I want is to be able to render {{item-creation-modal}} outside of the DOM (typically at the end of the DOM) to be sure it’s above everything.

How can I achieve this?

Take a look at yapplab’s Ember Wormhole. Very handy way to redirect render output to another (named by element id) location.

liquid-tether also meets your requirements, and it also exposes animations via liquid-fire.

doesn’t Ember do it on it’s own. Why are we being pushed to third-party stuff which brings with it another load of things to worry about.

I feel the same. Third-party stuff just for doing a decent alert('hello world');, it could be a joke…

I have the component do a show() on the item container. CSS can set its absolute position and make it an overlay irrelevant of where it is in the DOM.

Yes but it conflicts with css rules like position: absolute or overflow:hidden on the parent.

Could you not, on didInsert, have the component change it’s own parent during the lifetime of the overlay? I say this ignorant of how Ember keeps track of the DOM element.

I’m don’t really want to hack EmberJS. I prefer use a plugin for that.

This is actually how the Wormhole works: https://github.com/yapplabs/ember-wormhole/blob/master/addon/components/ember-wormhole.js

:slight_smile:

1 Like