Question

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

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

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

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

Answer 1

您可以在模板中使用component辅助工具和动态component-name。

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中，如何以编程方式按名称创建组件

2 个答案: