Put the conditional class name inside the helper

Question

How to put conditional class name inside helper element / component?

like this: I have {{input}}, if a certain condition is met, this class name must be changed, I can do it with if,

Anyway, to make this one liner?

{{#if model.bar.errors.name.length > 0}}
   {{input value=model.bar.name label='Bar Name' placeholder='The Name of Your Establishment' class=(model.bar.errors.name.length > 0 "color-" "blue")}}
{{#else}}
   {{input value=model.bar.name label='Bar Name' placeholder='The Name of Your Establishment' class="field-error"}}
{{/if}}

Answer 1

The corresponding concept in Ember is class name bindings.

There are various ways you can bind a class name or other html attribute to a value in your application:

1) the built-in if statement in the template:

<div class="{{if someVariable 'color-blue' 'not-color-blue}}">...</div>

2) by passing the classNameBindings attribute to your component:

// htmlbars template
{{foo-bar  classNameBindings="isBlue:color-blue" model=model}}

//component.js
isBlue: Ember.computed(function(){
  return (this.get('model.color.name') === 'blue');
})  

3) component.js( - # 2 , , .js ):

//component.js
classNameBindings: ["isBlue:color-blue"],
isBlue: Ember.computed(function(){
  return (this.get('model.color.name') === 'blue');
}) 

№ 2 № 3 - . classNameBindings - . .

:
http://guides.emberjs.com/v2.0.0/components/customizing-a-components-element/

Answer 2

, component.js:

//component.js
valueClass:Ember.computed(function(){
  if(this.get('model.bar.errors.name.length') > 0){
    return "color-blue";
  } else {
    return "field-error";
  }
})



//component.hbs
  {{input value=model.bar.name label='Bar Name' placeholder='The Name of Your Establishment' class=valueClass}}