How to get input value in Ember.js app? - forms

Question

What's the best solution of getting input value from Ember.TextField, after the button has been submitted?
Assume I have simple app for sending messages. I specified a view which represents input form where the user enters his message:
App.TextView = Ember.View.extend({
templateName: 'text',
submit: function(event) {
console.log(event);
}
});
Then, there is Handlebars template for this view:
<script type="text/x-handlebars" data-template-name="text">
<h1>Send the message:</h1>
<div class="send_form">
{{view Ember.TextField}}
<button type="submit">Done</button>
</div>
</script>
Basically, I need just one thing. When the user clicks on the button, I need to be notified (in the submit function or anywhere else in my app) and I need to grab the value from the TextField. How can I achieve that?

Answer 1

You could for example bind the value of the text field to a message property in the view.
Perhaps there is other solution, but I think this quite simple: http://jsfiddle.net/Sly7/vfaF3/
<script type="text/x-handlebars">
{{view App.TextView}}
</script>
<script type="text/x-handlebars" data-template-name="text">
<h1>Send the message:</h1>
<div class="send_form">
{{view Ember.TextField value=view.message}}
<button type="submit" {{action "submit" target=view}}>Done</button>
</div>
</script>​
App = Ember.Application.create({});
App.TextView = Ember.View.extend({
templateName: 'text',
message: '',
actions: {
submit: function(event) {
console.log(this.get('message'));
}
}
});