Validatable select menu

Expanding on http://jsbin.com/UpaXeta in Coffeescript, and trying to support select as well as input.

by pjmorse

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>
<script src="http://builds.emberjs.com/canary/ember.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script type="text/x-handlebars">
    <div class = "container"><h1>New contact</h1>
      {{validated-input value=name valid=nameValid placeholder="Name" type="text" input-class="form-control"}}
      {{validated-input value=email valid=emailValid placeholder="Email" type="email" input-class="form-control"}}
      {{#validated-select}}
          {{view Ember.Select classNames = 'form-control subscriber-company'
                                 content = numbers
                                  prompt = "Select"
          }}
      {{/validated-select}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="components/validated-input">
    <div {{bind-attr class="hasError :form-group"}}>
        {{input type=type value=value size=size pattern=pattern name=name placeholder=placeholder disabled=disabled maxlength=maxlength tabindex=tabindex class=input-class}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="components/validated-select">
    <div {{bind-attr class="hasError :form-group"}}>
        {{yield}}
    </div>
</script>

CSS

a {
    color:#666
}
a.active {
    color:#FF0000
}
.links {
    padding: 10px;
    background-color:#CCC;
}
.content {
    padding: 10px;
}
.has-error input, .has-error select {
    border: 1px solid #f00;
}

CoffeeScript

window.App = Em.Application.create()

App.Contact = DS.Model.extend
    name:     DS.attr 'string'
    email:    DS.attr 'string'
    company:  DS.attr 'string'

    nameValid:     Em.computed.notEmpty 'name'
    emailValid:    Em.computed.match 'email', '@'
    companyValid:  Em.computed.notEmpty 'company'

App.ApplicationRoute = Em.Route.extend
    model: ->
        App.Contact.create

App.ApplicationController = Em.Controller.extend
    numbers: ["One", "Two", "Three"]
        
App.ValidatedInputComponent = Em.Component.extend
  beenFocused: false
  valid: null
  hasError: (->
    if @get('beenFocused')
      return !@get('valid')
  ).property('valid', 'beenFocused')
  focusOut: ->
    @set('beenFocused', true)

 App.ValidatedSelectComponent = App.ValidatedInputComponent.extend()