Ember - Dynamically create a component

Question

I'm working on a module which needs to register components with Ember, Angular, React etc. depending on what is loaded into the page.

With React I can just do

if (window.React) {
  React.createClass(...

But how can I do the same with Ember? I'm looking for something like:

if (window.Ember) {
  Ember.registerComponent('my-component-name', Ember.Component.extend({
    ...
  }));
}

Is this possible? Bearing in mind I don't have access to the Ember App on the page.

score 0 · Answer 1 · edited May 23 '17 at 11:44

This is a good question. To break it down a bit, we want to dynamically:

Create a subclass of Ember.Component.
Compile that Component's template.
Register that Component in the app's global namespace.

The answer to 1. is already in your question (Ember.Component.extend). 2. has been answered elsewhere: here and here, for instance.

Off the top of my head, I'm not sure of an airtight answer for 3-- I'd recommend looking at using register on Ember's Dependency Injection container, or searching SO specifically for that goal.

Be forewarned that this isn't really on the Ember "happy path"-- for performance reasons, Ember (and Glimmer) are mostly focused on precompiled templates.

Ember - Dynamically create a component

1 Answers1