[英]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"
}
]
我在我的localhost上测试它。
你犯了一个愚蠢的错字:
window.WineCollection = Backbone.Model.extend
应该
window.WineCollection = Backbone.Collection.extend
请注意,按照惯例您WineListView
类应该使用this.collection引用的实例WineCollection
和骨干集合对象提供下划线迭代方法,从而代替
.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 :)这是你的第一个questoin所以让我让它变得难忘。 当你说集合undefined
你可以为我们提供行号(或突出显示它),这样就可以很容易地进行调试。 在initialize
方法中你必须把_.bindAll(this)
放在你想要引用你想要的对象(默认为window
对象)而不是下面做#1的情况下
_.each(this.model.models, function (wine) {
$(this.el).append(new WineItemView({
model: wine
}).render().el);
}, this);
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的副本
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.