javascript - 助手如何通过名称动态调用组件，例如 {{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 的组件，它们需要一个模型widget 基于它的 kind 属性。

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

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

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

在我看来，助手 widget-component 会收到一个小部件模型，并根据其属性进行某种“评估”，并在内部调用等效于 {{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 调用中绑定(bind)它.我希望这两个建议对您有所帮助:)