In Ember how can I create a component by name programmatically

Question

I can find lots of examples on how to create a component in Ember programmatically and add it to the DOM like this:

var comp = App.FooBarComponent.create();
comp.appendTo('#someArea');

But what would you do if you wanted to do it by a name provided?

var componentName = 'FooBar';
var comp = ???
comp.appendTo('#someArea');

Answer 1

You could use component helper with dynamic component-name in template.

App.FooComponent = Ember.Component.extend({..});
App.BarComponent = Ember.Component.extend({..});

var dynamicName = 'foo-component';

// template.hbs
<div id="some-area">
  {{component dynamicName}}
</div>

See component helper guide here: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_component

UPDATE: You could use model to provide rendering logic:

 // model is array of objects or records array
 <div id="some-area">
   {{#each model as |item| }}
     // component depends on item properties
     {{component item.componentName item=item}}
   {{/each}}
 </div>

Answer 2

You should be able to do something like...

var componentName = 'FooBar';
var comp = App[componentName + 'Component'].create();
comp.appendTo('#someArea');

That being said depending on what you are doing there probably is a better way to do whatever you are trying to accomplish.