Valeur de liaison textfield lorsque le bouton pression

Question

Je l'exemple suivant (voir ci-dessous) pour travailler avec ember.js, et tout fonctionne bien pour autant que j'entrer quelque chose dans le champ de texte et appuyez sur Entrée. Mais comment puis-je avoir le même résultat quand j'appuie sur le bouton? Comment puis-je lier la valeur du champ de texte en cliquant sur le bouton? Dois-je travailler avec vue?
Merci à l'avance!

<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

Ceci est en fait un peu difficile à accomplir, mais je l'ai retravaillé votre exemple dans un jsFiddle: http: / /jsfiddle.net/ebryn/vdmrA/

Je déconseillerais références hardcoding aux contrôleurs dans vos sous-classes de vue. Vous ne pouvez pas réutiliser les composants vue ailleurs si vous le faites.

Answer 2

Je pense que dans votre code pour le bouton Ember est juste va appeler la fonction addPerson sans lui donner le paramètre nom qu'il attend. Vous pourriez avoir à écrire une vue séparée pour ce bouton afin d'obtenir la valeur du champ de saisie pour passer à la fonction addPerson.

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

  }