[英]Backbone.js - Collection is undefined
I'm trying to learn backbone.js but the I'm stuck on fetching the json and adding to the collection.The collection is undefined and I don't know why. 我正在尝试学习backbone.js,但我仍然坚持抓取json并添加到集合中。集合未定义,我不知道为什么。 Code: 码:
$(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 returns: json.php返回:
[
{
"name":"Wine 1",
"price":"100",
"status":"available"
},
{
"name":"Wine 1",
"price":"100",
"status":"available"
},
{
"name":"Wine 1",
"price":"100",
"status":"available"
}
]
I'm testing this on my localhost. 我在我的localhost上测试它。
You made a silly typo: 你犯了一个愚蠢的错字:
window.WineCollection = Backbone.Model.extend
should be 应该
window.WineCollection = Backbone.Collection.extend
Note that by convention your WineListView
class should use this.collection to refer to an instance of WineCollection
and Backbone collection objects provide the underscore iteration methods so instead of 请注意,按照惯例您WineListView
类应该使用this.collection引用的实例WineCollection
和骨干集合对象提供下划线迭代方法,从而代替
.each(this.model.models, function(wine) {
do 做
this.collection.each(function (wineModel) {
You should change 你应该改变
window.WineCollection = Backbone.Model.extend({
model: Wine,
url: "wine.json"
});
to 至
window.WineCollection = Backbone.Collection.extend({
model: Wine,
url: "wine.json"
});
Welcome to SO :) this is your 1st questoin so let me make it memorable one. 欢迎来到SO :)这是你的第一个questoin所以让我让它变得难忘。 when you say collection is undefined
you could have provided us the Line number(or highlighted it) so that it would be easy to debug. 当你说集合undefined
你可以为我们提供行号(或突出显示它),这样就可以很容易地进行调试。 inside initialize
method you have to put _.bindAll(this)
in the case you wanted to reference the object that you wanted to( defaults to window
object ) instead of below do #1 在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);
try this too 试试这个
window.WineListView = Backbone.View.extend({
tagName: 'ul',
initialize: function () {
_.bindAll(this);
this.model.on('reset', this.render);
},
render: function () {
#1
}
});
Just in case you got lost here is a copy of the code http://jsbin.com/axixir/edit#javascript 万一你丢失了这里是代码http://jsbin.com/axixir/edit#javascript的副本
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.