【发布时间】：2011-12-19 02:00:56
【问题描述】：
我有一个问题，Stack 中有很多其他帖子。但是没有人解决这个问题，所以我把这个问题拿回去了。
快速参考： Uncaught TypeError: undefined is not a function rails3/backbone/js
我正在使用 backBoneJs 编写我的第一个应用程序。这是我正在遵循的示例：
http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/
当我执行代码时：
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
检查我的代码：
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>
收藏：
App.Collections.Documents = Backbone.Collection.extend({
model: Document,
url: '/documents'
});
控制器：
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() });
}
});
型号：
var Document = Backbone.Model.extend({
url : function() {
var base = 'documents';
if (this.isNew()) return base;
return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + this.id;
}
});
观看次数：
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.'
});
应用：
var App = {
Views: {},
Controllers: {},
Collections: {},
init: function() {
new App.Controllers.Documents();
Backbone.history.start();
}
};
【问题讨论】：
标签： javascript jquery backbone.js