Creating a component from a plugin's element when plugin is already inside another component

Question

I'm using a third-party plugin and I have no control over it. I'm using Ember in my entire application except for this plugin and I need instantiate a component inside a div rendered by said plugin to control it the way I want (to avoid the use of jQuery events and such).

1- I'm creating a component called "MyNewComponent"

2- The current structure:

<myComponent1>
    <myPlugin-notEmber>
       <div-where-I-want-to-append-MyNewComponent class="divClass"/>
    </myPlugin-notEmber>
</myComponent1>

3- Take into account that the "div-where-I-want-to-append-MyNewComponent" is rendered by the plugin, not by me.

4- What I'm currently trying to do inside myComponent1 is:

onDidInsertElement: Em.on('didInsertElement', function() {
    this.$().find('.divClass').each(function(index, element) {
        MyNewComponent.create().appendTo(Em.$(element));
    });
}),

Why it's not working:

I'm getting this: (Ember 1.13)

"You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead."

What I'm looking for:

a) the right way to do this OR

b) an equivalent alternative (that will create a component inside that plugin)

Answer 1

Your best option would be to use ember-wormhole

Which allows you to place anything inside another div with an id, so:

{{#ember-wormhole to="destination"}}
  {{my-new-component}}
{{/ember-wormhole}}

And somewhere else you'd have

<div id="destination"></div>

This will render the {{my-new-component}} inside of that div.