Backbone not initializing view. "undefined is not a function" - backbone.js

Question

I'm having problem in backbone where it's not finding my view. Here's the code
Here's the views.
App.Views.SummaryTableView = Backbone.View.extend({
tagName: 'tbody',
initialize: function () {
this.childViews = [];
this.collection.on('add', this.addOne, this);
this.collection.on('change reset', this.render, this);
console.log(this.collection);
},
addOne: function (appSummary) {
console.log('should be receiving model');
console.log(appSummary);
var appSumTable = new App.Views.SummaryListView({ model: appSummary });
console.log(appSummary);
this.$el.append(appSumTable.render().el);
this.childViews.push(appSumTable);
},
render: function () {
console.log('rendiring collection: ' + this.collection);
this.collection.each(this.addOne, this);
console.log('sending the model');
return this;
},
close: function () {
this.remove();
this.unbind();
this.childViews = [];
}
});
App.Views.SummaryListView = Backbone.View.extend({
tagName: 'tr',
template: template('app-summary-table-template'),
initialize: function () {
console.log(this.model);
this.model.on('add', this.render, this);
},
render: function () {
console.log('rendering');
var mod = this.model.toJSON();
this.$el.html(this.template(mod));
return this;
},
close: function () {
this.remove();
this.unbind();
}
});
The SummaryTableView has the collection, and the view sends the model to the SummaryListView. The collection is working fine, and the model contains the data. But for some reasons, when I run the code, it keeps saying SummaryListView is undefined. It can't find the view. Am I doing something wrong? I get the error in this line :
var appSumTable = new App.Views.SummaryListView({ model: appSummary });

Answer 1

you are referring SummaryListView before it is declared , hence the error So
you must Declare SummaryListView before SummaryTableView
the order should be like this
App.Views.SummaryListView = Backbone.View.extend({
tagName: 'tr',
.
.
});
App.Views.SummaryTableView = Backbone.View.extend({
tagName: 'tbody',
.
.
addOne: function (appSummary) {
console.log('should be receiving model');
console.log(appSummary);
var appSumTable = new App.Views.SummaryListView({ model: appSummary});
.
.
});
Fiddle