CODEWITHSUNDEEP
javascriptember.jshtmlbars
Alexander Koltunov
Alexander Koltunov

Reputation: 53

Render component with concat helper

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...

Upvotes: 1

Views: 71

Answers (1)

nem035
nem035

Reputation: 35481

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"}}

Upvotes: 2

Related Questions