Backbone.js的模板不渲染，即使模型傳遞數據

Question

Backbone.js的模板不渲染數據數據，即使模型傳遞數據

查看

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

模板： -

<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> 

這是整個代碼

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!!"); 
    } 
} 

即使模板生成，但沒有數據

<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

你在視圖的構造，其中Section可能是一個模型構造定義model: Section。這通常在一個集合中完成，然後集合使用指定的構造函數構造模型實例。視圖不會這樣做。

在構造上的模型構造函數調用toJSON()將直接導致錯誤

Uncaught TypeError: .toJSON is not a function 

因爲toJSON是在構造函數的原型定義與它共享真實情況，而不是直接。

你應該這樣做：

var SectionView = Backbone.View.extend({ 
    model: new Section() 
}); 

，但如果有這種觀點的多個實例這種情況下，它們將共享相同的模式，這是一般不希望。理想情況下，你應爲每個視圖實例模型實例，如：

var view = new SectionView({model: new Section() }); 

或

var SectionView = Backbone.View.extend({ 
    initialize : function() { 
     this.model = new Section(); 
     this.render(); 
    },