How to pass conditional string to ember component attribute using concat?

Question

What is the correct way to pass the conditional string when assigning the component's attribute using ember concat() method?

Consider the following

{{#my-compontent class=(concat (dasherize model.name)"-row")}}
  {{model.name}}
{{/my-component}}

What I want to do is adding the --disabled postfix conditionally, based on model.disabled property.

What I have tried:

{{#my-compontent class=(concat (dasherize model.name)"-row{{if model.disabled '--disabled'}}")}}
  {{model.name}}
{{/my-component}}

Resulting in:

<div class="component-name-row{{if model.disabled '--disabled}}">
  Component name
</div>

The other thing I tried was using ternary helper, based on this answer:

{{#my-compontent class=(concat (dasherize model.name)"-row"(ternary model.disabled '--disabled' ''))}}
  {{model.name}}
{{/my-component}}

but it crashed:

Assertion Failed: A helper named "ternary" could not be found

Is there any way to do that? If not, how would I achieve the same effect using a different approach?

score 2 · Accepted Answer · edited Dec 18 '20 at 09:57

2

As usual, 5 minutes after asking I found out the answer myself:

{{#my-compontent class=(concat (dasherize model.name)"-row(if model.disabled '--disabled')")}}
  {{model.name}}
{{/my-component}}

The clue is to use (if condition 'string') over {{if condition 'string'}}.

edited Dec 18 '20 at 09:57

Lux

answered Dec 18 '20 at 09:38

wscourge

You can do `(concat (dasherize appName) "-row" (if true '--disabled'))`, if you find it more readable. – locks Dec 20 '20 at 14:16
You might also find this proposal interesting: https://github.com/emberjs/rfcs/issues/623 – locks Dec 20 '20 at 14:17

1 Answers1