Ember.js 在Ember中，如何以编程方式按名称创建组件

我可以找到很多关于如何以编程方式在Ember中创建组件并将其添加到DOM的示例，如下所示：

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

但是如果你想用提供的名字来做，你会怎么做

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

---

您可以将

组件

助手与模板中的动态

组件名称

一起使用

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

var dynamicName = 'foo-component';

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

App.FooComponent=Ember.Component.extend（{..}）；
App.BarComponent=Ember.Component.extend（{..}）；
var dynamicName='foo component'；
//模板.hbs
{{component dynamicName}}

请参见此处的组件帮助器指南：

更新：您可以使用模型提供渲染逻辑：

 // 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>

//模型是对象数组或记录数组
{{{#每个模型作为|项}
//组件依赖于项属性
{{component item.componentName item=item}
{{/每个}}

您应该能够执行以下操作：

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

---

也就是说，根据您正在做的事情，可能有更好的方法来完成您想要完成的任何事情。

谢谢-如果我只有一个组件，这很好，但是如果我被迫使用appendTo（因为我说需要未知数量的组件），还有其他方法吗？我的目标不清楚。看起来最好使用“未知数量”的模型实例数组，由为每个模型实例渲染组件的组件包装。可以基于模型实例属性使用动态组件辅助对象。