我如何在助手内部调用与 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。
最佳答案
您可以构建一个助手并将构建组件名称的逻辑放入其中。让我们调用助手 widget-name
,你可以像这样使用它:
{{component (widget-name widget) model=widget}}
如果逻辑像将小部件类型附加到 cs-widget-
的末尾一样简单,则以下应该可以解决问题:
{{component (concat "cs-widget-" widget.type) model=widget}}
我相信您的 widget-component
方法更复杂,因为您必须有一个带有逻辑的计算属性,然后在 {{component
调用中绑定(bind)它.我希望这两个建议对您有所帮助:)
关于javascript - 助手如何通过名称动态调用组件,例如 {{component componentName}} 助手,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33290910/