助手如何通过名称动态调用组件，例如 {{component componentName}} 助手

Question

如何在助手内部调用与 Handlebars 的助手 {{component 'componentName' model=model}} 等效的助手，以根据以编程方式更改的 componentName 动态呈现组件？

我正在使用 ember-cli 1.13.8 和 Ember 2.0.1。

一点上下文

我有名为 cs-widget-image、cs-widget-text、cs-widget-form 的组件，这些组件期望基于其 kind 属性的模型 widget。

所以对于一个类型为image的小部件，我想渲染组件cs-widget-image，但我不认为模型应该知道发现正确组件名称的逻辑，所以我我不考虑使用助手{{component widget.componentName}}。

我认为最好有一个我可以在我的观点上使用的助手，例如：

{{#each manyTypesWidgets as |widget|}}
  {{widget-component widget.type model=widget}}
{{/each}}

在我看来，助手widget-component 将接收一个小部件模型，并根据其属性执行一种“eval”并在内部调用等效于{{component 'componentName' model=widget}}

例如：widget = {id: 1, type: 'image'}

{{widget-component widget.type model=widget}}

应该在模板上以编程方式调用相当于 HandleBars 的助手：

{{component 'cs-widget-image' model=widget}}

关于可能重复的问题的免责声明

在将其标记为重复之前，我需要说我确实在 StackOverflow 上发现了一些类似的问题，例如： [1] [2] [3] [4] [5]，但所有答案都基于旧版本的 Ember，在 Ember 2.0.1 和 ember-cli 1.13.8 上不再工作。

Answer 1

您可以构建一个助手并将构建组件名称的逻辑放入其中。让我们调用助手widget-name，你会这样使用它：

{{component (widget-name widget) model=widget}}

如果逻辑就像将小部件类型附加到cs-widget- 的末尾一样简单，那么以下应该可以解决问题：

{{component (concat "cs-widget-" widget.type) model=widget}}

我相信你的widget-component 方法更复杂，因为你必须有一个带有逻辑的计算属性，然后在{{component 调用中绑定它。我希望这两个建议会有所帮助:)

Answer 2

这不适合你吗？

//JS

widgetsWithTemplates : Ember.computed.map('manyTypesWidgets', function(widget) {
   widget.set('componentName', 'cs-widget-' + widget.get('type')); 
})

而在模板中，您只需通过 componentName 属性调用组件：

//HBS 

  {{#each manyTypesWidgets as |widget|}}
       {{widget.componentName model=widget}}
  {{/each}}