search

yapplabs / ember-wormhole

Render a child view somewhere else in the DOM.
MIT License
284 stars 68 forks source link

Can't use wormhole in dynamic DOM #105

Open schlesingermatthias opened 6 years ago

schlesingermatthias commented 6 years ago

Hi, I'd like to use ember-wormhole in a part of the DOM that is not always rendered (i.e. a dropdown). But that doesn't work as it throws an "element is not in the DOM" error when the component is not shown.

Is there an option to fail silently and render only if the DOM element with the specified id is actually inside the DOM?

Thank you.

lukemelia commented 6 years ago

Hi @schlesingermatthias, there is no option for this currently. I would be open to considering a PR that added such an option. An implementer would need to consult the value of this new boolean in the component's _appendToDestination method.

schlesingermatthias commented 6 years ago

@lukemelia Hi, I will do that. Any preferences regarding the name? allowMissingId?

Edit: I'm not sure that this will work as the part of the template that contains the content of the wormhole needs to be rerendered when the part of the template that contains the wormhole becomes visible. And there's no way I can think of to force that rerender across components (or even engines).

lukemelia commented 6 years ago

@schlesingermatthias Agreed, I don't think automatic rerendering would be easy to get working. If you decide to pursue without support for that, I think errorOnMissingDestination with a default value of true would be clearest.

CygnusRoboticus commented 6 years ago

I've implemented a simple version of this using a strict=true/false option. The wormhole doesn't attempt to re-wormhole on DOM updates, it just suppresses the error and I toggle the wormhole separately. I can open a PR using errorOnMissingDestination instead, but is automatic re-wormholing a necessary feature?

Kilowhisky commented 5 years ago

I'd like to help out with this as i the same use case of dropdowns where elements need to be populated dynamically by which components are shown in another section.

Kilowhisky commented 5 years ago

It looks like unless there is an ember function to watch for DOM changes that is public, MutationObserver is the way to go. Unfortunately its only supported in IE 11 and up.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

I can't see a clear and fast way to support older browsers. There's a CSS hack that supports IE 10+ but thats it. I'm still going to implement though as IE11 is the lowest supported version my app supports.

I know ember has to have a hook but i highly doubt it is public and i also highly doubt it will work down to 1.13 which this component supports.

Any thoughts or suggestions?