使用 concat 助手渲染组件

Posted 2023-02-22

【中文标题】使用 concat 助手渲染组件

【英文标题】：Render component with concat helper

【发布时间】：2017-11-10 14:13:59

【问题描述】：

有没有办法将 htmlBars 中的组件作为 concat 助手中传递的参数呈现？ 我有fa-icon ember 组件和显示标签的自定义组件。我需要像这样显示它：

my-simple-button label=(concat (fa-icon "pencil") " " (t "myAwesomeTranslate"))

但是，很明显，fa-icon 是一个组件而不是一个助手。

更新。 谢谢！事实上，我将ember-async-button 与自定义消息一起使用，因此我必须编写类似

#async-button as |component state|
  #if state.isPending
    if pendingLabel pendingLabel (t 'site.actions.pending')
  else if state.isDefault
    label
  else if state.isRejected
    label
  else if state.isFulfilled
    label
  /if
/async-button

所以我想要一个像my-simple-button 这样的包装器，它接受label 和pendingLabel 并隐藏那些ifs。所以我不能使用块，因为我需要在 4 个地方设置图标。我看到的唯一选择是对icon 和pendingIcon 属性使用ifs，但这会使代码难看。所以基本上我想知道是否有办法简化这个......

【问题讨论】：

这里需要给出更多的上下文，fa-icon组件代码js/hbs。你认为调用/渲染组件会返回一些数据吗？

【参考方案1】：

据我所知，这是不可能的。即使它以某种晦涩难懂的方式传递，传递一个预渲染的组件似乎也很麻烦。

为此，正确的方法是将yield 作为标签的一部分，这是 Ember 中用于从外部范围渲染组件的内置机制。

// inside templates/components/my-simple-button.hbs
yield label

那么您可以将fa-icon 作为my-simple-button 的子级传递：

#my-simple-button label="myAwesomeTranslate"
  fa-icon "pencil"
/my-simple-button

它会渲染fa-icon "pencil" 而不是yield。

如果您希望my-simple-button 专门支持图标，您可以包含icon 属性并使用fa-icon 而不是yield：

// inside templates/components/my-simple-button.hbs
#if iconfa-icon icon/if label

然后像这样传递它：

my-simple-button label="myAwesomeTranslate" icon="pencil"

【讨论】：

我正在准备一个游戏。 Here it is。和你的想法完全一样！