CODEWITHSUNDEEP
backbone.js
Rajanikanth Desai
Rajanikanth Desai

Reputation: 1

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

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>

Upvotes: 0

Views: 71

Answers (1)

T J
T J

Reputation: 43166

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();
    },

Upvotes: 2

Related Questions