Ember Classnamebindings

Ember Classnamebindings

HTML

<script src="http://libraries.azurewebsites.net/js/handlebars-1.0.0-rc.4.js"></script>
<script src="http://libraries.azurewebsites.net/js/ember-1.0.0-rc.6.js"></script>
<script src="http://libraries.azurewebsites.net/js/ember-data.js"></script>
<script type="text/x-handlebars">
    <div class="control-group">
    {{view App.AlphaNumField valueBinding="value" type="text" classNames="inputField" placeholder="Alpha num value"}}
    </div>
</script>

CSS

.error{
    border:1px solid red;
}

.inputField{
    padding:10px;
}

.control-group{
    border:1px solid green;
    padding:5px;
}

JavaScript

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

App.AlphaNumField = Ember.TextField.extend({
  isValid: function () {
    return /^[a-z0-9]+$/i.test(this.get('value'));
  }.property('value'),
  classNameBindings: 'isValid::error'
})