Render a component outside of the template in EmberJS

#1

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?

#2

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

#3

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

#4

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.

#5

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

#6

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.

#7

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

#8

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.

#9

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

#10

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

:slight_smile: