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. 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:
[
{
"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.
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. 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:
[
{
"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.
Share Improve this question asked Jul 19, 2012 at 11:31 Sebastian LucaciuSebastian Lucaciu 331 silver badge3 bronze badges3 Answers
Reset to default 5You 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
.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"
});
Wele to SO :) this is your 1st questoin so let me make it memorable one. 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. 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
_.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);
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./axixir/edit#javascript