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

您已在视图构造函数中定义了model: Section，其中Section可能是模型构造函数。这通常在集合中完成，集合稍后使用指定的构造函数构造模型实例。 View不会这样做。

直接在模型构造函数上调用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();
    },

即使模型传递数据，backbone.js模板也不会渲染数据

1 个答案: