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 );
    }
});​