Extend Input Field

The latest build of Ember.

by Jeremy Gillick

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="index">
    <h2>Index Content:</h2>
    {{view App.Field valueBinding='fieldValue'}}
    <p>{{fieldValue}}</p>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; }
li { border-bottom: 1px solid #333; padding: 5px 0; }

JavaScript

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
    content: {
        'fieldValue': ''
    }
});

App.Field = Ember.TextField.extend({
    keyUp: function(e){
        console.log('Key up', this.get('value'));
    },
    change: function(){
        console.log('Changed', this.get('value'));
    }
});