Valore di associazione da Textfield quando si preme il pulsante

Question

Ho il seguente esempio (vedi sotto) per lavorare con Ember.js, e tutto funziona bene per quanto inserisco qualcosa nel campo di testo e premi Invio. Ma come posso avere lo stesso risultato quando premo il pulsante? Come posso associare il valore del campo di testo quando faccio clic sul pulsante? Ho un lavoro con una vista?
Grazie in anticipo!

<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

Questo è in realtà un po 'complicato da realizzare, ma ho rielaborato il tuo esempio in un jsfiddle: http://jsfiddle.net/ebryn/vdmra/

Consiglierei contro i riferimenti a codifica hard ai controller nelle sottoclassi di visualizzazione. Non puoi riutilizzare quei componenti di visualizzazione altrove se lo fai.

Answer 2

Penso che nel tuo codice per il pulsante Ember chiamerà la funzione Addperson senza dargli il parametro del nome che si aspetta. Potrebbe essere necessario scrivere una vista separata per quel pulsante per far passare il valore del campo di input alla funzione Addperson.

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

  }