Uncaught TypeError: undefined is not a function ra

Question

I just started delving into javascript to make project more responsive and I am working through a backbone.js example.

I've replicated http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/ in a new Rails 3 project.

I run the project and go to the home page .... and there is a link there to /# and nothing else. Looking into the js console I get errors on two scripts: application.js and backbone.js

This (backbone.js)

backbone-min-0-3-3.js:8Uncaught TypeError: Cannot call method 'extend' of undefined

and this (application.js):

var App = {
        Views: {},
        Controllers: {},
        Collections: {},
        init: function() {

        new App.Controllers.Fffforms();
**error message ---> application.js:9Uncaught TypeError: undefined is not a function**
            Backbone.history.start();
        }
};

Being new to js, this doesn't exactly make sense and nothing I've looked up has been all that helpful in the short term.

Can anyone tell me what exactly these errors would indicate and how I can go about following up? Everything checks out comparing the resources in https://github.com/jamesyu/CloudEdit, but my replication from a new rails 3 project (not a clone of that repo) doesn't exactly work.

Any suggestions appreciated, bearing in mind I've just embarked on learning some javascript.

EDIT:

By suggestion, I went and actually added in the Jammit gem and configured it to serve all the js scripts, which the default Rails all was not. Now all the scripts are going to the browser (controller included). Unfortunately, this doesn't solve the original issue, only giving more errors on load, flowing from the App init which is this in the chrome js console:

Uncaught TypeError: undefined is not a function
App.initapplication.js:9
(anonymous function):3000/#new:32
d.extend._Deferred.f.resolveWithjquery.min.js:16
d.d.extend.readyjquery.min.js:16
d.c.addEventListener.yjquery.min.js:16

Given I'm just copying right now, there must be some small overlooked detail beyond me atm that is preventing App from initiating properly.

Answer 1

It sounds like you are not including the file that holds the declaration of App.Controllers.Fffforms. Make sure that you are including that file somewhere in you code prior to where you include application.js.

Answer 2

I presume there is a kind of bundling mechanism there in your app. Make sure all files have correct usage of semicolons (;) in all bundled files.

Answer 3

My answer is similar to @ream88's, but Rails 3.1+ Asset Pipeline feature takes care of minification, bundling and so on, so I prefer to have the un-minified versions available for debugging, etc.

So download the commented/full version of backbone.js and underscore.js and save them in app/assets/javascripts (you could also save them in vendor/assets/javascripts).

The difference is that you should update the manifest file (app/assets/javascripts/application.js) to add the require directives, like so

//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require_tree .

Because backbone depends on underscore, this will cause them to get loaded in the right order, thus avoiding the error.

Answer 4

Ran into the same problem, and then I figured out that I haven't included underscore.js anywhere. So I wrote a simple backbone.js file:

/*
 *= require backbone/underscore-min.js
 *= require backbone/backbone-min.js
 */

and stored it under vendor/assets/javascripts along with the Backbone and Underscore files:

vendor/assets/javascripts/
├── backbone
│   ├── backbone-min.js
│   └── underscore-min.js
└── backbone.js

---

My application.js.coffee looks something like this one now:

#= require backbone
#= require query

Answer 5

This just bit me so I thought I'd share my find: make sure your file's line endings match your server's file system.