助手如何能够像{ component componentName}} helper那样动态地调用组件的名称

Question

如何在助手内部调用与工具栏的助手{{component ' componentName‘model=model}相等的值，以便基于以编程方式更改的componentName动态呈现组件？

我使用的是烬-cli 1.13.8，与Ember 2.0.1。

一点背景

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

因此，对于其类型为image的小部件，我希望呈现组件cs-widget-image，但我不认为模型应该知道发现正确组件名称的逻辑，因此我不考虑在视图中使用helper {{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 2.0.1和Ember 1.13.8上不再起作用的旧版本的ember。

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