backbone.js template is not rendering data even though model passing data - backbone.js

Question

Backbone.js template is not rendering data even though model passing data
View
var SectionView = Backbone.View.extend({
initialize : function() {
this.render();
},
model: Section,
className: 'div-body-row',
template: _.template($("#table-body-template").html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
Template:-
<script type="text/templete" id="table-body-template">
<div class="inner-div col-lg-2 col-md-2 col-sm-2 col-xs-2"><%= id %></div>
<div class="inner-div col-lg-2 col-md-2 col-sm-2 col-xs-2"><%= roomNumber %></div>
<div class="inner-div col-lg-2 col-md-2 col-sm-2 col-xs-2"><%= dateTime %></div>
<div class="inner-div col-lg-2 col-md-2 col-sm-2 col-xs-2"><%= personId %></div>
<div class="inner-div col-lg-2 col-md-2 col-sm-2 col-xs-2"><%= courseId %></div>
<div class="inner-div col-lg-2 col-md-2 col-sm-2 col-xs-2"><%= termId %></div>
</script>
this is entire code
var Section = Backbone.Model.extend({
defaults : {
id : '',
roomNumber : '',
dateTime : '',
person : '',
course : '',
term : ''
}
});
var SectionView = Backbone.View.extend({
initialize : function() {
this.render();
},
model: Section,
className: 'div-body-row',
template: _.template($('#table-body-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
var a = this.model.get("id");
var b = this.model.get("sectionName");
var c = this.model.get("roomNumber");
var d = this.model.get("dateTime");
var e = this.model.get("person");
var f = this.model.get("course");
var g = this.model.get("term");
console.log(a,b,c,d,e,f,g);
return this;
}
});
var SectionCollection = Backbone.Collection.extend({
model: Section,
url: 'http://localhost:8080/student-faculty-attendance/section/sectionDetails'+'?id='+id,
});
var SectionCollectionView = Backbone.View.extend({
initialize : function(){
this.render();
},
tagName: 'div',
className: 'div-body',
singleSectionview: function(section){
var sectionView = new SectionView({model: section});
this.$el.append(sectionView.el);
},
render: function(){
this.collection.forEach(this.singleSectionview, this);
return this;
}
});
var section_collection = new SectionCollection();
var section_collection_view;
section_collection.fetch({
success: function(collection) {
console.log(collection);
if (collection.length) {
section_collection_view = new SectionCollectionView({collection: collection});
$("#table-body").append(section_collection_view.el);
} else {
console.log("Collection is empty!!");
}
}
And even template is generating but without data
<div id="table-body" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="div-body">
<div class="div-body-row">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
<div class="div-body-row">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
<div class="div-body-row">
<div class="inner-div"></div>
<div class="inner-div"></div>
</div>
</div>
</div>

Answer 1

You have defined model: Section in the view constructor, where Section is probably a model constructor. This is usually done in a collection, and the collection later constructs model instances using the specified constructor. View does not do that.
Calling toJSON() directly on a model constructor will result in error
Uncaught TypeError: .toJSON is not a function
because toJSON is defined on the prototype of constructor to be shared with it's instances, not directly on the constructor.
You should do:
var SectionView = Backbone.View.extend({
model: new Section()
});
but in this case if there are multiple instances of this view, they will share same model, which is generally not desired. Ideally you should create a model instance per view instance, like:
var view = new SectionView({model: new Section() });
or
var SectionView = Backbone.View.extend({
initialize : function() {
this.model = new Section();
this.render();
},