TextField change event

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
Change event fires only when the field loses focus and has changed.</br>
Type in field then click anywhere
<script type="text/x-handlebars">
  {{#view App.Form controllerBinding="App.peopleController"}}
    {{view App.MyTextField viewName="textField"}}
    {{#if App.peopleController.formDirty}}
        <button type="submit">Add</button>
    {{/if}}
  {{/view}}
  <ul>
    {{#each App.peopleController}}
      <li>{{name}}</li>
    {{/each}}
  </ul>
</script>

JavaScript

window.App = Ember.Application.create();

App.peopleController = Em.ArrayController.create({
    content: [{name: "Joe"}, {name: "Jane"}],
    formDirty: false,
    addPerson: function(name) {
        this.unshiftObject(App.Person.create({name: name}));
    }
});

App.Person = Em.Object.extend({
    name: null
});       

App.Form = Em.View.extend({
    tagName: 'form',
    controller: null,
    //textField: null,
    
    submit: function(event) {
      event.preventDefault();
      this.get('controller').addPerson(this.getPath('textField.value'));
      this.setPath('textField.value', null);
    }
});

App.MyTextField = Ember.TextField.extend({
    formDirtyBinding: 'App.peopleController.formDirty',
    value:null,
    change: function(event) {
      this.set('formDirty', !Ember.empty(this.value));
    },
    observes: function(event) {
    	alert(this.value);
    }
  });