Question

有没有办法在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，但这会使代码难看。所以基本上我想知道是否有办法简化这个......

Answer 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 icon}}{{fa-icon icon}}{{/if}} {{label}}

并将其传递给：

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

使用concat helper

1 个答案: