ember-wormhole + fastboot

a 💜 story

Cory Forsyth

@bantic

201 Created

Consultants in New York City

What ember-wormhole does• render a block to a DOM element somewhere else

on the page

How ember-wormhole works

• in didInsertElement:

• reads the firstChild and lastChild from this.element

• find destinationElement via document.getElementById

• relocate nodes between first/last child to destinationElement

How ember-wormhole works

Fastboot

• No `didInsertElement`

• Component hooks that are called:

• didReceiveAttrs, didUpdateAttrs,willRender, willUpdate

Fastboot

ember: component-node-manager.js

ember: renderer.jsSimpleDOM

ember-wormhole+Fastboot issues

• in didInsertElement:

• reads the firstChild and lastChild from this.element

• find destinationElement via document.getElementById

• relocate nodes between first/last child to destinationElement

ember-wormhole+Fastboot issues

ember-wormhole+Fastboot issues

• minor hack: `didInsertElement` -> `willRender`

ember-wormhole+Fastboot issues

• no `this.element`. Place head/tail nodes manually.

component#init

ember-wormhole.hbs

ember-wormhole+Fastboot issues

• SimpleDOM does not provide `getElementById`

utils/dom.js

Demo

demo: application.hbs

demo: application.hbs

Demo

demo: application.hbs

demo: application.hbs

Links• ember-wormhole

• ember-wormhole demo

• ember-wormhole+fastboot demo

• PR to add Fastboot compat

• ember code:

• env.destinedForDOM check: component-node-manager.js

• InertRenderer