我的每个功能都有下一个问题。我想渲染集合中的所有表格，然后添加用于创建新表格的功能。但我不知道为什么控制台出现错误:
未捕获类型错误:无法调用未定义的方法“each”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Backbone test</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="jumbotron">
<div class="container">
<h1>My tables!</h1>
</div>
</div>
</header>
<content>
<div id="add-table">
<div class="container">
<label>Add new table!</label>
<form>
<legend>Name</legend>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
</form>
</div>
</div>
<div id="content"></div>
</content>
<script id="allTableTemlate" type="text/template">
<li><%= name %></li>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script>
// !main.js
(function() {
window.App = {
Models: {},
Collections: {},
Views: {},
Router: {}
};
window.vent = _.extend({}, Backbone.Events);
window.template = function(id) {
return _.template( $('#' + id).html() );
};
})();
// !models.js
App.Models.Table = Backbone.Model.extend({});
// !collections.js
App.Collections.Tables = Backbone.Collection.extend({
model: App.Models.Table,
url: 'tables.json'
});
// !views.js
App.Views.App = Backbone.View.extend({
initialize: function() {
var allTablesView = new App.Views.Tables({ collection: App.tables }).render();
$(document.body).append(allTablesView.el);
}
});
App.Views.Tables = Backbone.View.extend({
tagName: 'ul',
render: function() {
this.collection.each( this.addOne, this );
return this;
},
addOne: function(table) {
var tableView = new App.Views.Tables({ model: table });
this.$el.append(tableView.render().el);
},
});
App.Views.Table = Backbone.View.extend({
tagName: 'li',
template: template('allTableTemlate'),
render: function() {
this.$el.html( this.template( this.model.toJSON() ) );
return this;
},
});
// !router.js
App.Router = Backbone.Router.extend({
routes: {
'':'index',
},
index: function() {
console.log('index page !');
},
});
// !index.html
new App.Router;
Backbone.history.start();
App.tables = new App.Collections.Tables;
App.tables.fetch().then(function() {
new App.Views.App({ collection: App.tables });
});
</script>
</body>
</html>
这是我带有 json 数据的完整代码:
[
{"name": "Table 1","stts": "redstts","id": 1},
{"name": "Table 2","stts": "redstts","id": 2},
{"name": "Table 3","stts": "redstts","id": 3},
{"name": "Table 4","stts": "redstts","id": 4},
{"name": "Table 5","stts": "redstts","id": 5}
]
最佳答案
您的 addOne 函数中有一个拼写错误。您应该创建一个新的“App.Views.Table”而不是“new App.Views.Tables”:
addOne: function(table) {
var tableView = new App.Views.Table({ model: table });
this.$el.append(tableView.render().el);
}
关于javascript - 主干错误未捕获类型错误 : Cannot call method 'each' of undefined?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18891935/