Valeur de liaison textfield lorsque le bouton pression
-
28-10-2019 - |
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>
La solution
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.
Autres conseils
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
}