Ember.js ArrayController error

Question

I am trying to test the following sample Ember.js code but I am always getting the following error displayed in the Chrome browser console:

Uncaught TypeError: Property '_super' of object [object Object] is not a function

Code:

MovieTracker.moviesController = Ember.ArrayController.create({
       content: [],
       init: function(){
           this._super();
           var list = [
               MovieTracker.Movie.create({
                   title: 'Movie 1',
                   rating: 4 }),
               MovieTracker.Movie.create({
                   title: 'Movie 2',
                   rating: 5
               })];
           this.set('content', list);
       }
});

I am using Ember-1.3.2.js

can someone please tell me what I am missing here? and how to solve this error?

New error message after changing .create to .extend as recommended by @kingpin2k

TypeError: Object function () { if (!wasApplied) { Class.proto(); // prepare prototype... } o_defineProperty(this, GUID_KEY, undefinedDescriptor); o_defineProperty(this, '_super', undefinedDescriptor); var m = meta(this), proto = m.proto; m.proto = this; if (initMixins) { // capture locally so we can clear the closed over variable var mixins = initMixins; initMixins = null; this.reopen.apply(this, mixins); } if (initProperties) { // capture locally so we can clear the closed over variable var props = initProperties; initProperties = null; var concatenatedProperties = this.concatenatedProperties; for (var i = 0, l = props.length; i < l; i++) { var properties = props[i]; Ember.assert("Ember.Object.create no longer supports mixing in other definitions, use createWithMixins instead.", !(properties instanceof Ember.Mixin)); if (typeof properties !== 'object' && properties !== undefined) { throw new Ember.Error("Ember.Object.create only accepts objects."); } if (!properties) { continue; } var keyNames = Ember.keys(properties); for (var j = 0, ll = keyNames.length; j < ll; j++) { var keyName = keyNames[j]; if (!properties.hasOwnProperty(keyName)) { continue; } var value = properties[keyName], IS_BINDING = Ember.IS_BINDING; if (IS_BINDING.test(keyName)) { var bindings = m.bindings; if (!bindings) { bindings = m.bindings = {}; } else if (!m.hasOwnProperty('bindings')) { bindings = m.bindings = o_create(m.bindings); } bindings[keyName] = value; } var desc = m.descs[keyName]; Ember.assert("Ember.Object.create no longer supports defining computed properties.", !(value instanceof Ember.ComputedProperty)); Ember.assert("Ember.Object.create no longer supports defining methods that call _super.", !(typeof value === 'function' && value.toString().indexOf('._super') !== -1)); Ember.assert("actions must be provided at extend time, not at create " + "time, when Ember.ActionHandler is used (i.e. views, " + "controllers & routes).", !((keyName === 'actions') && Ember.ActionHandler.detect(this))); if (concatenatedProperties && indexOf(concatenatedProperties, keyName) >= 0) { var baseValue = this[keyName]; if (baseValue) { if ('function' === typeof baseValue.concat) { value = baseValue.concat(value); } else { value = Ember.makeArray(baseValue).concat(value); } } else { value = Ember.makeArray(value); } } if (desc) { desc.set(this, keyName, value); } else { if (typeof this.setUnknownProperty === 'function' && !(keyName in this)) { this.setUnknownProperty(keyName, value); } else if (MANDATORY_SETTER) { Ember.defineProperty(this, keyName, null, value); // setup mandatory setter } else { this[keyName] = value; } } } } } finishPartial(this, m); this.init.apply(this, arguments); m.proto = proto; finishChains(this); sendEvent(this, "init"); } has no method 'get'

Answer 1

I had the same problem before and after a lot of trials the problem was in the controller name spelling and case. For example (based on your question code) calling:

MovieTracker.moviesController.get('length');

while the name of the controller is MoviesController with a capital M will give you this error. So try double checking your code, make sure you have the correct name with correct case.

It is also a good practice to keep controller name with capital M as @kingpin2k recommended

Answer 2

I was having the same issue as I'm following the same book as well, finally figured out why this wasn't working on Ember 1.5.1:

1. Should use capital for MoviesController instead of moviesController as mentioned.
2. Should be extending off Ember.ArrayController not creating off of it.
3. Don't use this._super()

So the following code should work for anyone interested...

MovieTracker.MoviesController = Ember.ArrayController.extend({
content: [],
init: function() {
    var list = [
        MovieTracker.Movie.create({
            title: 'Movie 1',
            rating: 4
        }),
        MovieTracker.Movie.create({
            title: 'Movie 2',
            rating: 5
        })];

    this.set('content', list);
}});

Answer 3

MoviesController should be capitalized and you should be extending Ember.ArrayController not creating it.

MovieTracker.MoviesController = Ember.ArrayController.extend({
       content: [],
       init: function(){
           this._super();
           var list = [
               MovieTracker.Movie.create({
                   title: 'Movie 1',
                   rating: 4 }),
               MovieTracker.Movie.create({
                   title: 'Movie 2',
                   rating: 5
               })];
           this.set('content', list);
       }
});

Answer 4

'create' works perfect for the example in this book. Below code worked for me

MovieTracker.MoviesController = Ember.ArrayController.create({
content: [],
init: function(){
var list = [    
        MovieTracker.Movie.create({
            title: 'The Avengers',
            rating: 4
        }),
        MovieTracker.Movie.create({
            title: 'Spiderman',
            rating: 5
        })];
    this.set('content', list);
}       
});

versions

DEBUG: Ember : 1.5.0 DEBUG: Handlebars : 1.1.2 DEBUG: jQuery : 1.10.2

Ember Debugger Active VM2276:161 MovieTracker.MoviesController.get('length');

2