ember.jshandlebars.jsember.js-view

how to set two class name for Ember.js input helper


i'm trying to bind an input element like this:

{{input value=email type="text" placeholder="Enter email" class=emailError:with-error}}

it works just fine, as long as I try to assign it only 1 class name ".with-error". how can I assign 2 class names, so it will be: ".with-error .second-class"? I know how to do it with:

{{bind-attr class=":secondClass emailError:with-error"}}

but this doesn't work with input helper.

Thanks!


Solution

  • This feature is not well documented, but when defining attributes on a Handlebars helper, you can either leave out the quotes to indicate that you want the value of the attribute to be a bound variable, or you can add the suffix "Binding" and then use quotes with an expression similar to the one you would use with {{bind-attr}}.

    So, in your case, the following should work:

    {{input value=email type="text" placeholder="Enter email" classBinding="emailError:with-error :myClassName"}}
    

    Note how instead of class=myBoundValues we are using classBinding="myBoundValue".