Valor vinculante de TextField al presionar el botón

Question

Tengo el siguiente ejemplo (ver más abajo) para trabajar con Ember.js, y todo funciona bien en la medida en que ingreso algo en el campo de texto y presione Entrar. Pero, ¿cómo puedo tener el mismo resultado cuando presiono el botón? ¿Cómo puedo vincular el valor del campo de texto al hacer clic en el botón? ¿Tengo trabajo con una vista?
¡Gracias por adelantado!

<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

En realidad, esto es un poco difícil de lograr, pero he reelaborado tu ejemplo en un jsfiddle: http://jsfiddle.net/ebryn/vdmra/

Aconsejaría contra las referencias de codificación a los controladores en las subclases de su vista. No puede reutilizar esos componentes de vista en otro lugar si lo hace.

Answer 2

Creo que en su código para el botón Ember solo llamará a la función Addperson sin darle el parámetro de nombre que espera. Es posible que deba escribir una vista separada para ese botón para que el valor del campo de entrada pase a la función addperson.

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

  }