I am having a problem that there are a lot of others posts here in Stack. But no one solves the problem so I am taking this problem back.
A quick reference:
Uncaught TypeError: undefined is not a function rails3/backbone/js
I am writing my first app with backBoneJs. This is the example that I am following:
http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/
When I execute the code:
1 - Uncaught TypeError: Cannot call method 'extend' of undefined (Controller 1ºline)
2 - Uncaught TypeError: undefined is not a function (app 6º line)
App.initapp.js:6
(anonymous function)/backbone/#:32
f.extend._Deferred.e.resolveWithjquery-1.6.4.min.js:2
e.extend.readyjquery-1.6.4.min.js:2
c.addEventListener.C
Check my code:
Index.html
<html>
<head>
<title></title>
<link href="css/style.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<h1><a href="#">Editor de Documentos</a></h1>
<h2>Backbone + PHP by Lqdi</h2>
<div id="notice"></div>
<div id="app"></div>
<script type="text/javascript" src="js/_libs/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/_libs/json2.js"></script>
<script type="text/javascript" src="js/_libs/underscore.js"></script>
<script type="text/javascript" src="js/_libs/backbone.js"></script>
<script type="text/javascript" src="js/_libs/jquery.dotimeout.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/documents.js"></script>
<script type="text/javascript" src="js/models/document.js"></script>
<script type="text/javascript" src="js/collections/documents.js"></script>
<script type="text/javascript" src="js/views/edit.js"></script>
<script type="text/javascript" src="js/views/index.js"></script>
<script type="text/javascript" src="js/views/notice.js"></script>
<script type="text/javascript">
$(function() {
App.init();
});
</script>
</body>
</html>
Collections:
App.Collections.Documents = Backbone.Collection.extend({
model: Document,
url: '/documents'
});
Controllers:
App.Controllers.Documents = Backbone.Controller.extend({
routes: {
"documents/:id": "edit",
"": "index",
"new": "newDoc"
},
edit: function(id) {
var doc = new Document({ id: id });
doc.fetch({
success: function(model, resp) {
new App.Views.Edit({ model: doc });
},
error: function() {
new Error({ message: 'Could not find that document.' });
window.location.hash = '#';
}
});
},
index: function() {
var documents = new App.Collections.Documents();
documents.fetch({
success: function() {
new App.Views.Index({ collection: documents });
},
error: function() {
new Error({ message: "Error loading documents." });
}
});
},
newDoc: function() {
new App.Views.Edit({ model: new Document() });
}
});
Models:
var Document = Backbone.Model.extend({
url : function() {
var base = 'documents';
if (this.isNew()) return base;
return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
}
});
Views:
edit.js
App.Views.Edit = Backbone.View.extend({
events: {
"submit form": "save"
},
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.render();
},
save: function() {
var self = this;
var msg = this.model.isNew() ? 'Successfully created!' : "Saved!";
this.model.save({ title: this.$('[name=title]').val(), body: this.$('[name=body]').val() }, {
success: function(model, resp) {
new App.Views.Notice({ message: msg });
Backbone.history.saveLocation('documents/' + model.id);
},
error: function() {
new App.Views.Error();
}
});
return false;
},
render: function() {
$(this.el).html(JST.document({ model: this.model }));
$('#app').html(this.el);
// use val to fill in title, for security reasons
this.$('[name=title]').val(this.model.get('title'));
this.delegateEvents();
}
});
index.js
App.Views.Index = Backbone.View.extend({
initialize: function() {
this.render();
},
render: function() {
$(this.el).html(JST.documents_collection({ collection: this.collection }));
$('#app').html(this.el);
}
});
notice.js
App.Views.Notice = Backbone.View.extend({
className: "success",
displayLength: 5000,
defaultMessage: '',
initialize: function() {
_.bindAll(this, 'render');
this.message = this.options.message || this.defaultMessage;
this.render();
},
render: function() {
var view = this;
$(this.el).html(this.message);
$(this.el).hide();
$('#notice').html(this.el);
$(this.el).slideDown();
$.doTimeout(this.displayLength, function() {
$(view.el).slideUp();
$.doTimeout(2000, function() {
view.remove();
});
});
return this;
}
});
App.Views.Error = App.Views.Notice.extend({
className: "error",
defaultMessage: 'Uh oh! Something went wrong. Please try again.'
});
The app:
var App = {
Views: {},
Controllers: {},
Collections: {},
init: function() {
new App.Controllers.Documents();
Backbone.history.start();
}
};
If you are using backbone 0.5.x the Backbone.Controller was renamed to Backbone.Router
From the documentation: