ember.jshtmlbars

How to change input helper's class based on some condition in Ember

How can the if condition clause be used in an input helper.

I tried:

{{input class="{{if errors.name "style-error"}}" }}

It caused building error.

the errors.name here is property from controller.

I reckon that it is the nested double curly braces causing the syntax error, but don't know how to achieve this conditional class declaration.

Solution

  • You can nest helpers using parenthesis:

    {{input class=(if errors.name "style-error")}}

    You should use this instead of the xxxBinding="..." syntax

    You can use the concat helper to conditionally add multiple classes:

    Conditionally add static + dynamic class:

    {{input class=(if errors.name (concat "static-class " dynamicClass))}}

    Conditionally add two dynamic classes:

    {{input class=(if errors.name (concat dynamicClass1 " " dynamicClass2))}}

    Add one class if the condition is true, another if it's false:

    {{input class=(if errors.name "style-error" "style-success")}}

    Add a class only when the condition is false:

    {{input class=(unless errors.name "style-success")}}

    Two conditions:

    {{input class=(concat (if errors.name "name-error") " " (if errors.date "date-error"))}}

    For more complex boolean arithmetic (e.g. and/or/not, equality and comparisons) you can use ember-truth-helpers