Backbone.js-集合未定义
Backbone.js - Collection is undefined
我正在尝试学习backbone.js,但我一直在获取json并添加到集合中。该集合未定义,我不知道为什么。代码:
$(document).ready(function() {
(function($) {
//model
window.Wine = Backbone.Model.extend();
window.WineCollection = Backbone.Model.extend({
url: "http://localhost/bootstrap/json.php",
model: Wine
});
//views
window.WineItemView = Backbone.View.extend({
template: _.template($("#wine-item-template").html()),
tagName: 'li',
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
window.WineListView = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.model.bind('reset', this.render, this);
},
render: function() {
_.each(this.model.models, function(wine) {
$(this.el).append(new WineItemView({
model: wine
}).render().el);
}, this);
return this;
}
});
window.WineView = Backbone.View.extend({
template: _.template($('#wine-template').html()),
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
//Router
window.AppRouter = Backbone.Router.extend({
routes: {
'': 'home',
'wines/:id': "wineDetails"
},
home: function() {
this.wineList = new WineCollection();
this.wineListV = new WineListView({
model: this.wineList
});
this.wineList.fetch({success: function(){
console.log(this.wineList.models); // => 2 (collection have been populated)
}});
console.log(this.wineListV);
$("#winelist").html(this.wineListV.render().el);
},
wineDetails: function(id) {
this.wine = this.wineList.get(id);
console.log(id);
this.wineView = new WineView({
model: this.wine
});
$("#container").empty().html(this.wineView.render().el);
}
});
})(jQuery);
var app = new AppRouter();
Backbone.history.start();
});
json.php返回:
[
{
"name":"Wine 1",
"price":"100",
"status":"available"
},
{
"name":"Wine 1",
"price":"100",
"status":"available"
},
{
"name":"Wine 1",
"price":"100",
"status":"available"
}
]
我正在本地主机上测试它。
你犯了一个愚蠢的打字错误:
window.WineCollection = Backbone.Model.extend
应该是
window.WineCollection = Backbone.Collection.extend
注意,按照惯例,WineListView
类应该使用this.collection来引用WineCollection
的实例,并且Backbone集合对象提供下划线迭代方法,因此代替
.each(this.model.models, function(wine) {
进行
this.collection.each(function (wineModel) {
您应该更改
window.WineCollection = Backbone.Model.extend({
model: Wine,
url: "wine.json"
});
至
window.WineCollection = Backbone.Collection.extend({
model: Wine,
url: "wine.json"
});
欢迎来到SO:)这是你的第一个问题,让我做一个难忘的问题。当您说集合是undefined
时,您可以向我们提供行号(或突出显示它),以便调试。在initialize
方法中,您必须将_.bindAll(this)
放在您想要引用的对象的情况下(默认为window
对象),而不是在下面执行#1
_.each(this.model.models, function (wine) {
$(this.el).append(new WineItemView({
model: wine
}).render().el);
}, this);
1
this.model.each(function (wine) {
$(this.el).append(new WineItemView({
model: wine
}).render().el);
}, this);
试试这个
window.WineListView = Backbone.View.extend({
tagName: 'ul',
initialize: function () {
_.bindAll(this);
this.model.on('reset', this.render);
},
render: function () {
#1
}
});
万一你在这里迷路了,有一份代码http://jsbin.com/axixir/edit#javascript
相关文章:
- 司 司长.使用 find() 时返回未定义的集合实例
- 无法处理Knockout.js Observable Array中未定义的集合
- Backbone.js-集合未定义
- Meteor前端未定义Mongo集合
- MeteorJS集合未定义
- 为什么 .fetch() 未为集合定义
- 主干集合在调用 fetch() 时给出“未定义的 Ajax”错误
- 在 Meteor.com 上部署后,集合将变为未定义
- 尝试创建关系时未定义的集合
- 流星:发布中未定义的集合
- Backbone.js集合获取'这个_byId'未定义
- backbone.js-集合视图给出"TypeError:无法读取属性'el'未定义的“;错误
- Meteor CollectionFS集合未定义
- 创建Backbone.js集合时出现未定义错误
- Bluebird承诺:any()集合返回值未定义
- 地图集合中未定义的对象
- 主干集合url未定义
- 当尝试将对象添加到骨干集合时,此模型未定义
- 获取未定义试图获取一个集合的ObjectId
- Emberjs Hashbang正在获取Uncaught ReferenceError:未定义集合