Render component with concat helper

Question

Is there a way to render component in HTMLBars as argument passed in concat helper? I have fa-icon ember component and my custom component that displays label. I need to display it like:

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

but, obviously, fa-icon is a component not a helper.

Update. Thanks! In fact I use ember-async-button with custom messages, and therefore I have to write something like

{{#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}}

So I want a wrapper like my-simple-button which takes label and pendingLabel and hides those ifs. So I can't use block because I need to set up icons in 4 places. The only option I see is using ifs for icon and pendingIcon properties, but that makes code ugly. So basicly I want to know if there is a way to simplify this...

You need to give more context here, fa-icon component code js/hbs. Do you think calling/rendering component will return some data ? — Ember Freak, Jun 08 '17 at 18:23

score 2 · Answer 1 · answered Jun 08 '17 at 19:21

As far as I know, that's not really possible. Even if it is in some obscure way, passing a pre-rendered component just seems hacky.

The proper approach for this is to have a {{yield}} as part of your label which is a built-in mechanism in Ember to render components from external scope.

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

Then you can just pass fa-icon as a child of my-simple-button:

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

And it would render {{fa-icon "pencil"}} instead of {{yield}}.

If you want my-simple-button to specifically support icons, you could include an icon property and use fa-icon instead of yield:

// inside templates/components/my-simple-button.hbs
{{#if icon}}{{fa-icon icon}}{{/if}} {{label}}

And pass it like:

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

I've just working to prepare a twiddle. [Here it is](https://ember-twiddle.com/e1451688f5505cae37f97c471f854b51). Completely the same ideas with you! — ykaragol, Jun 08 '17 at 20:31

Render component with concat helper

1 Answers1