javascript - Backbone/Require 应用程序中带有 subview 的 View 中的渲染问题

Question

从主视图中，我尝试渲染一些应驻留在主视图页面中的 subview ，例如成绩 View 及其 subview 成绩 View ，单击导航栏图标时，其中一个可见并一次填充整页。主页有一个导航栏，其中包含用于一次显示一个 subview 的链接。主视图就像 Facebook 移动应用程序页面，带有导航栏和 subview (例如提要、好友请求等)，填充导航栏下的页面。

我已经实现了其中一个 subview ，但无法渲染它。 Homeview 成功渲染。每个 subview 在初始化时呈现自身，并且成绩集合在初始化时获取自身。

主页 View :

define([
  'jquery',
  'ratchet',
  'underscore',
  'backbone',

  'text!home/hometemplate.html',

  'grades/gradesview',

  ],
  function($, Ratchet, _, Backbone, HomeTemplate, GradesView){
      var HomeView = Backbone.View.extend({

          el: $('body'),
          initialize: function() {
              //X-construct the subviews in initialize to create them once.
              this.gradesView = new GradesView();

              this.render();
          },
          template: _.template( HomeTemplate ),
          render: function() {
              this.$el.html( this.template() );
              //X-Place the Subview element into DOM.
              this.$('#gradesviewcontainer').html( this.gradesView.el );
          },

        });

        return HomeView;
})

成绩 View :

define([
    'underscore',
    'backbone',

    'grades/gradescollection',
    'grades/gradeview',
    ],
    function(_, Backbone, GradesCollection, GradeView){
        var GradesView = Backbone.View.extend({
            el: $('#gradescontainer'),
            //model: GradeModel,
            initialize: function(){
                this.collection = new GradesCollection;
                this.collection.each(function(item) {
                  console.log(item);
                });

                this.render();
            },
            //template:,

            render: function() {
                this.collection.each( function (item) {
                    this.renderGrade( item );
                }, this );
            },

            renderGrade: function(item) {
                this.gradeView = new GradeView( {model: item} );
                this.$el.append( this.gradeView.el );
            },
        });

        return GradesView;
})

成绩收集:

define([
    'underscore',
    'backbone',

    'grades/grademodel',
    ],
    function(_, Backbone, GradeModel) {
        var GradesCollection = Backbone.Collection.extend ({

            model: GradeModel,
            url: '/grade',
            initialize: function() {
                this.fetch();
            },

        });

    return GradesCollection;
});

成绩查看:

define([
    'underscore',
    'backbone',

    'grades/grademodel',
    'text!grades/gradetemplate.html'
    ],
    function(_, Backbone, GradeModel, GradeTemplate){
        var GradeView = Backbone.View.extend({
            tagName: 'div',
            initialize: function(){
                this.render();
            },
            template: _.template( GradeTemplate ),

            render: function() {
                this.$el.html( this.template( this.model.attributes ));
                return this;
            },
        });

        return GradeView;
})

这里的另一个问题是导航栏链接每个 html anchor 在 homeview 渲染中不起作用。在 JS 控制台中，我可以看到服务器响应的资源 json，这是预期的对象数组: [{"coursename":"Math","gradenumeric":100},{"coursename":"Phys", “等级数字”:80}]。我在这里错过了什么？

Answer 1

我认为您只需要从 GradesView 中删除 el: $('#gradescontainer') 即可。您不应该为 subview 设置 el 元素，因为您要将其附加到尚未呈现的父 View 。

我包含了一个非常简化的版本，仅可通过 el: $('#gradescontainer') 运行。在我的示例中，为了简单起见，我删除了 GradeModel 和 GradeCollection，只添加了一些占位符代码。

此示例应渲染“GRADE TEMPLATE”五次，每个 Grade 模型一次。尝试将 el: $('#gradescontainer') 放回到 GradesView 中，您将看到“GRADE TEMPLATE”不再呈现。

您的另一个问题是集合在初始化方法中调用fetch。这使用 AJAX，因此模型将异步加载。初始化 GradesView 时，您需要将监听器事件绑定(bind)到集合。例如:

this.collection.on('add', this.renderGrade, this);

<小时/>

示例 1:此示例不使用模型/集合。只是说明您需要删除 el: $('#gradescontainer')

var GradeView = Backbone.View.extend({
  tagName: 'div',
  initialize: function(){
    this.render();
  },
  template: "GRADE TEMPLATE",

  render: function() {
    this.$el.html(this.template);
    return this;
  },
});


var GradesView = Backbone.View.extend({
  initialize: function(){
    this.render();
  },
  render: function() {
    var self = this;
    for (var i = 0; i < 5; i++) {
        self.renderGrade({id:i});
    }
  },

  renderGrade: function(item) {
    this.gradeView = new GradeView({model: item});
    this.$el.append(this.gradeView.el);
  },
});

var HomeView = Backbone.View.extend({
   el: $('#test'),
   initialize: function() {
     this.gradesView = new GradesView();
     this.render();
   },
   template: '<h1>GRADES</h1><div id="gradesviewcontainer"></div>',
   render: function() {
     this.$el.html( this.template );
     this.$('#gradesviewcontainer').html( this.gradesView.el );
   },

 });

var v = new HomeView();

<小时/>

示例 2:此示例使用模型/集合。模型手动添加到集合中。为了简单起见，不使用 Fetch。这与示例1基本相同。

var GradeModel = Backbone.Model.extend({
  defaults: {
    letter: 'A'
  }
});

var GradesCollection = Backbone.Collection.extend ({
  model: GradeModel,
  url: '/grade'
});

var GradeView = Backbone.View.extend({
  tagName: 'div',
  initialize: function(){
    this.render();
  },
  template: _.template("<li><%= letter %></li>"), 
  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  },
});


var GradesView = Backbone.View.extend({
  initialize: function(){
    this.collection = new GradesCollection();
    this.collection.add(new GradeModel({letter: 'A'}));
    this.collection.add(new GradeModel({letter: 'B'}));
    this.collection.add(new GradeModel({letter: 'C'}));    
    this.collection.add(new GradeModel({letter: 'D'}));
    this.render();
  },
  render: function() {
    this.collection.each( function (item) {
      this.renderGrade( item );
    }, this )
  },

  renderGrade: function(item) {
    this.gradeView = new GradeView({model: item});
    this.$el.append(this.gradeView.el);
  },
});

var HomeView = Backbone.View.extend({
  el: $('#test'),
  initialize: function() {
    this.gradesView = new GradesView();
    this.render();
  },
  template: '<h1>GRADES</h1><div id="gradesviewcontainer"></div>',
  render: function() {
    this.$el.html( this.template );
    this.$('#gradesviewcontainer').html(this.gradesView.el);
  },

});

var v = new HomeView();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<div id="test"></div>