Custom Ember Textfield Input where placeholder floats to top of input when populated

gistfile1.txt

Working example http://jsfiddle.net/NQKvy/475/

<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    {{view 'form-group' placeholder='First Name'}}
    {{view 'form-group' placeholder='Last Name'}}
    {{view 'form-group' placeholder='Website'}}
</script>

<script type="text/x-handlebars" data-template-name="form-group">
    {{#if view.showPlaceholder}}
        <div class="placeholder">{{view.placeholder}}</div>
    {{/if}}
    
    {{view view.input}}
</script>
<script type="text/javascript">
App = Ember.Application.create({});

App.FormGroupView = Ember.View.extend({
    classNames: 'form-group',
    templateName: 'form-group',
    showPlaceholder: false,
    
    input: Ember.TextField.extend({
        attributeBindings: ['placeholder'],
        placeholderBinding: 'parentView.placeholder',
        valueChanged: function() {            
           this.set('parentView.showPlaceholder', this.get('value.length') > 0);
        }.observes('value')
    })
});
</script>
<style type="text/css">
body {
    font-family: 'HelveticaNeue', Helvetica, Arial, san-serif;
    font-size: 12px;
    margin: 30px 10px 10px 10px;
}

.form-group {
    position: relative;
    width: 200px;
    margin-bottom: 20px;
}

.placeholder {
    position: absolute;
    top: -13px;
    left: 0;
    text-transform: uppercase;
    font-size: 9px;
    opacity: .5;
}

input[type='text'] {
    padding: 1px 0 3px 0;
    font-size: 15px;
    margin: 0px;
    border: none;
    display: block;
    width: 100%;
    border-bottom: 1px solid #ddd;
}
</style>