Saturday, 31 August 2013

Backbone JS: My view is not being considered a constructor. Why?

Backbone JS: My view is not being considered a constructor. Why?

The error in my console says that app.ItemView is not a constructor.
Another post said that the type of the view should be a function. When I
check the type it is undefined, but I have no idea why.
Any insight would be greatly appreciated.
Here is the code:
var app = app || {};
$(function(){
app.items = [
new app.Item({ name: 'Abe Lincoln', details: 'Is he that guy from
that new reality show?'}),
new app.Item({ name: 'Captain Planet', details: 'He is our hero'}),
new app.Item({ name: 'Karthus', details: 'Press R'}),
new app.Item({ name: 'Your Mom', details: 'She misses me'}),
new app.Item({ name: 'Teddy Roosevelt', details: 'Makes the most
interesting man in the world look boring'})
];
app.itemsCollection = new app.ItemCollection(app.items),
app.itemsCollectionView = new app.ListView({collection:
app.itemsCollection});
Backbone.history.start();
});
app.Item = Backbone.Model.extend({
defaults: {
name: 'name not given',
details: 'no details available'
}
});
app.ListView = Backbone.View.extend({
el: '#the-list',
initialize: function(){
this.render();
},
render: function(){
//alert("the size of collection is: "+this.collection.size());
this.collection.forEach(function(item){
this.addOne(item);
}, this);
},
//create an itemview for a model, and add it to the list view
addOne:function(item){
alert(typeof(app.ItemView));
var itemViewInst = new app.ItemView({model: item});
this.$el.append(itemViewInst.render().el);
}
});
app.ItemView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#list-item-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
app.ItemCollection = Backbone.Collection.extend({
model: app.Item,
//url: '/something'
});
app.AppRouter = (Backbone.Router.extend({
routes: {
"" : "defaultView",
"details/:id" : "details"
},
defaultView: function(){
//render the collection to the page
},
details: function(id){
}
}));

No comments:

Post a Comment