Ember.js - simple text + button form

by dgeb

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.3.js"></script>
<script type="text/x-handlebars">
  {{#view App.Form controllerBinding="App.peopleController"}}
    {{view Ember.TextField viewName="textField"}}
    <button type="submit">Add Person</button>
  {{/view}}
  <ul>
    {{#each App.peopleController}}
      <li>{{name}}</li>
    {{/each}}
  </ul>
</script>

JavaScript

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

App.peopleController = Em.ArrayController.create({
    content: [{name: "Tom"}, {name: "Mike"}],
    
    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);
    }
});