Binding value from textfield when pressing button

Question

I have the following example (see below) to work with Ember.js, and everything works alright as far as I enter something in the textfield and press enter. But how can I have the same result when I press the button? How can I bind the value of the textfield when clicking the button? Do I have work with a view?
Thanks in advance!

<script type="text/x-handlebars">
  {{view App.TextField}}
  {{#view Ember.Button target="App.peopleController" action="addPerson"}}
    Add Person
  {{/view}}
  <ul id='todo-list'>
  {{#each App.peopleController }}
    <li>{{name}}</li>
  {{/each}}
  </ul>
</script>
<script>
  App = Em.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.TextField = Em.TextField.extend({
    insertNewline: function() {
      App.peopleController.addPerson(this.get("value"));
      this.set("value", "");
    }
  });
</script>

Answer 1

This is actually a little tricky to accomplish, but I've reworked your example in a jsFiddle: http://jsfiddle.net/ebryn/vdmrA/

I would advise against hardcoding references to controllers in your view subclasses. You can't reuse those view components elsewhere if you do that.

Answer 2

I think in your code for the Ember Button is just going to call the addPerson function without giving it the name parameter that it expects. You might have to write a separate view for that button in order to get the value of the input field to pass to the addPerson function.

App.MyButton = Em.Button.extend({
  click: function(){
    var value = App.TextField.get('value')
    // etc

  }