Programmatic wormhole?

[michaelbushe]

Can I programmatically populate a div with a wormhole on a DOM event? The element to populate is not created by Ember (there's no template to add a "show me" flag to.

I am creating an Ember app that is a table with, basically, a row for each Person. Each row must have an icon that the user can click to expand the row to show more data about the person (a "table row accordion"). The table is the JQuery Tabulator grid. The Ember component that holds the table initializes the Tabulator component in didInsertElement.

didInsertElement() {
let tabulator = this.$("#the-tabulator-div").tabulator({
... lot's of table config
columns: annotateLastColumn(this.get('columns')),
rowFormatter: this.rowFormatter
...
});
...grab some data and come back...
}

Later, after data is fetched, Tabulator displays the data for each row, of course creating DOM nodes at that point (and outside of Ember). This all works in a basic ugly way. The hooks for the accordion are in annotateLastColumn(), which adds an icon to the right of the last column for the user to click, and in rowFormatter(jqRow, data) - which Tabulator calls as it makes each row. The rowFormatter's parameters are the jQuery reference for the row and the row's data. The function adds a hidden div to the row with the Person detail - via straight HTML strings appended to the row. The user clicks the icon and it shows/hides. It is this div that Tabulator creates that I want to make a worm-hole when the user clicks.

Though it displays, the code is ugly - a template is preferable to JS strings. It's also outside of Ember. The accordion is intended to be interactive (the user can edit the Person data) and moveable - the user can pop it out of the table.

It seems ember-wormhole requires a template with a flag that shows/hides the wormhole. Since the divs are created by Tabulator, there is no template for ember-wormhole to leverage. When the user clicks the icon in the row, can I problematically tell Ember wormhole to "show it here"?

[lukemelia]

This should be possible @michaelbushe. The destination element does not need to be within the Ember app. You may run into issues with event handling if the DOM element is outside of the Ember app's root element though (because typical event delegation won't work) but you could work around this.