如何从另一个渲染组件/助手？答案

【问题标题】：How to render component/helper from another one?如何从另一个渲染组件/助手？
【发布时间】：2015-11-20 10:26:42
【问题描述】：

我有渲染组件（source），它用于从控制器字段渲染组件/助手。它适用于 ember 1.9.1，但在更新到 ember 1.12.1 后，我发现 API 发生了变化。在updating code 之后，我恢复了简单的案例（比如从某个属性按名称渲染视图）。但是大部分功能仍然损坏。

我很想知道在哪里可以阅读更多关于此类内容的信息，例如

env（在组件/助手内部实现中使用）
morph（我知道它是 html-bars 的一部分，但我对更多文档感兴趣）
挂钩？

任何人都可以分享一些创建此类助手的经验吗？或者在这种情况下找到解决方案的方法？（我的意思是这件事没有完全记录）

附：我从 ember 1.11 知道组件助手——但它不允许渲染助手（带参数）并且使用它我应该在模板中定义所有属性。当组件/助手的名称是动态的——我应该传递不同的参数/属性。

提前谢谢

P.P.S

我想用我的助手恢复一些功能示例（更多示例和动机可以在助手页面找到——我只想注意我的助手和内置组件助手之间的区别）：

{{#render-component componentName _param='btn-component' action="addSection"}}
{{render-component 'pluralize-component' ___params=hash}} // hash = { count:ungrouped.content.meta.total, single:"Object"}
{{#render-component 'componentName' _param=paramName someOption=someOptionValue}}

【问题讨论】：

标签： ember.js

【解决方案1】：

您在这里有很多问题，但要回答您标题中的问题：Ember 1.11 引入了component helper，它允许您动态渲染组件。

componentName: 'someComponentName'

...

{{component componentName param=value someAction='someMapping'}}

【讨论】：

组件助手允许渲染组件但不允许助手（你不能将参数传递给 {{component}} - 这是主要问题。你也不能从控制器定义属性结构 -你应该在模板中定义它
那我恐怕帮不了你了。重现以前的功能最好的办法就是阅读源代码。 Ember 对视图层私有部分的文档非常缺乏。源代码本身甚至没有太多文档。
我知道，但是有很多复杂的时刻——比如 Streams、Morph 等——我在试图调试并找到一些逻辑时打破了我的想法（.Thx 任何地方

【解决方案2】：

This article 包含大部分信息，可以用来实现我认为您正在获得的东西（与标准组件帮助程序相比）。

他们建议的一个值得注意的开箱即用解决方案是使用（几乎弃用）dynamic-component addon。

{{dynamic-component
  type=theType
  boundProperty=foo
  staticProperty="bar"
  onFoo="fooTriggered"
}}

希望这个（以及文章中的其他建议）能够引导您找到解决方案。

【讨论】：

组件助手允许渲染组件但不允许助手（你不能将参数传递给 {{component}} - 这是主要问题。你也不能从控制器定义属性结构 -你应该在模板中定义它
对。我认为如果您希望动态运行助手，您应该将它们包装为组件并使用 {{component}} 或者如果您有很多，只需制作一个引用所有助手并进行切换/选择的组件基于组件的参数。

【解决方案3】：

我一直在寻找这个问题的答案，最终自己找到了解决方案。

我的场景是我想将一个组件传递给另一个组件并在该组件内渲染它，这听起来像是这个问题的目标。

对于那些不清楚{{component}} 助手如何工作的人：

用它来渲染另一个组件。
{{component "component-name" param1="value" param2="value"}}

这与以下内容完全相同：
{{component-name param1="value" param2="value"}}

对于我的场景，我这样做了：

在调用第一个组件的模板中：
{{my-comp-1 comp=(component "my-comp-2" param1="value" param2="value") other-param="value"}}

在my-comp-1的模板中，使用组件使用的属性：
{{component comp}}

这就是我需要做的。

这在 Ember 2.7.0 中完美运行。

【讨论】：