input-label.handlebars

{{description}}

input_label_component.coffee

App.InputLabelComponent = Em.Component.extend
  tagName: 'label'
  classNameBindings: [':right', ':inline', 'hasErrors:error']
  attributeBindings: 'for'

  init: ->
    @_super()

    # We do this here because we don't know the name of the
    # key we depend on at creation time.
    error_prop = "on.errors.#{@get('for')}"
    Em.defineProperty(@, 'errors', Em.computed(error_prop, -> @get(error_prop)))

  hasErrors: (->
    @get('errors.length') > 0
  ).property('errors.length')

valid-input.handlebars

{{input value=value name=for typeBinding="type" classBinding="hasErrors:error" placeholder=placeholder dropdown=dropdown}}
{{#if hasErrors}}
  <div class="small error">
    {{#each error in errors}}
      {{error}}
      <br />
    {{/each}}
  </div>
{{/if}}

valid_input_component.coffee

App.ValidInputComponent = Em.Component.extend
  init: ->
    @_super()

    # We do this here because we don't know the name of the
    # key we depend on at creation time.
    error_prop = "on.errors.#{@get('for')}"
    value_prop = "on.#{@get('for')}"
    Em.defineProperty(@, 'errors', Em.computed(error_prop, -> @get(error_prop)))
    Em.defineProperty(@, 'value',  Em.computed(value_prop, (key,value)->
      if value?
        @set(value_prop, value)
      else
        @get(value_prop)
    ))

  type: 'text'

  hasErrors: (->
    @get('errors.length') > 0
  ).property('errors.length')