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

Question

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

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

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

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

Answer 1

您可以在模板中使用具有动态 component-name 的 component 助手。

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

var dynamicName = 'foo-component';

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

在此处查看组件助手指南：http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#method_component

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

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

你应该可以做类似...

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

话虽这么说，但根据您正在做的事情，可能有更好的方法来完成您想要完成的任务。

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

In Ember how can I create a component by name programmatically

ember.js

ember-cli