Appending/rendering Ember component with non-ember library

@BlueRaja wrote:

We use FullCalendar, a non-Ember plugin for displaying a calendar with events on it (think of meeting on the Outlook calendar). The UI of these events can be customized using a callback which passes the event as a jQuery object.

Is it possible to inject an Ember component into these events?

Ideally I’d like to do something like this

$element.append(MyComponent.create(options).getHtml());

but unfortunately there doesn’t seem to be any way to get the HTML (or DOM) for a component that doesn’t already exist on the DOM.

I also tried this:

Ember.getOwner(this)
  .factoryFor('component:my-component')
  .create(options)
  .appendTo($element);

but that causes Ember to crash with Illegal Invocation: elMatches.call(el, selector), apparently because $element doesn’t exist on the DOM yet.

Another option I’ve seen online is to do something like

// Template
<div style="display: none">
  <div id='myComponent'>{{my-component}}</div>
</div>

//component.js
const myComponentDom = this.$('#myComponent').detach();
$element.append(myComponentDom);

But then there is no way to customize the component with the options, meaning I’d have to use jQuery to manually edit the component, at which point I might as well just hard-code the HTML in the JS file.

Does anyone know how to do this?

Posts: 1

Participants: 1

Read full topic