帮助器如何通过其名称{{component componentName}} helper

Question

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

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

一点上下文

我有一个名为cs-widget-image，cs-widget-text，cs-widget-form的组件，它们基于widget属性而对模型kind有所期待。

因此，对于类型为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 helper的等价物：

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