Get and set value of TextField - ember.js

Question

I have this code for view:
App.TodoView = Em.View.extend({
labelView: Em.TextField.extend({
}),
createNew:function () {
console.log(this.labelView.get('value'));
}
});
and this template:
{{#view App.TodoView}}
{{view labelView}}
{{#view Em.Button target="parentView" action="createNew"}}Add{{/view}}
{{/view}}
And I get the following error:
Uncaught TypeError: Object (subclass of Ember.TextField) has no method 'get'
I want to use insertNewLine method too, so I can set the value of the Em.TextField in template.

Answer 1

The problem is that you are defining a class and trying to get the value from it. What you rather want is to get the value of a concrete instance. This can be achieved by binding the value of the LabelView to a value which can then be retrieved in the App.TodoView, in this case todoLabel, see http://jsfiddle.net/pangratz666/PTPsV/:
Handlebars:
{{#view App.TodoView }}
<!-- Bind the value of the LabelView to todoLabel on the App.TodoView -->
{{view LabelView valueBinding="todoLabel" }}
{{#view Em.Button target="parentView" action="createNew" }}Add{{/view}}
{{/view}}
JavaScript:
App.TodoView = Em.View.extend({
LabelView: Em.TextField.extend(),
createNew: function(){
var value = this.get('todoLabel');
console.log( 'le todoLabel', value );
}
});​
Note that since you are defining a class LabelView it's a convention to write it in Uppercase, whereas instances are written in lowerCase. See a good blog post about naming convention by The Emberist.
Also, to access a property on an Ember.Object, you should always use get, so it's this.get('todoLabel') and not this.todoLabel.
You can now implement further methods like insertNewline and cancel - note it's insertNewline and not insertNewLine, see text_support.
The result would look like this, see http://jsfiddle.net/pangratz666/9ZLAC/:
App.TodoView = Em.View.extend({
LabelView: Em.TextField.extend({
insertNewline: function(){
this.get('parentView').createNew();
},
cancel: function(){
this.set('value', '');
}
}),
createNew: function(){
var value = this.get('todoLabel');
console.log( 'le todoLabel', value );
}
});​