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:
/
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();
}
};
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/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();
}
};
1 Answer
Reset to default 5If you are using backbone 0.5.x the Backbone.Controller was renamed to Backbone.Router
From the documentation:
Upgrading to 0.5.0+
We've taken the opportunity to clarify some naming with the 0.5.0 release. Controller is now Router, and refresh is now reset. The previous saveLocation and setLocation functions have been replaced by navigate. Backbone.sync's method signature has changed to allow the passing of arbitrary options to jQuery.ajax. Be sure to opt-in to pushState support, if you want to use it.