Backbone学习笔记三

这部分介绍如何分视图显示前面讲的表格内容，Backbone中视图可以嵌套显示，例如前面例子中整个页面可以用一个视图来渲染，table表格可以用一个视图来渲染，表格中的一行可以用一个视图来渲染，这样就用三层视图，只要在以前的例子上稍作修改就可以实现这效果。

 

首先定义最里层的视图，表格中的行。通过tagName成员变量指定该视图对应的html元素，render方法中指定tr元素中显示的内容。当然也可以指定成员变量className的值，来指定tr元素显示的式样。

     var StudentView = Backbone.View.extend({
         
         tagName: 'tr',
         
         render: function() {
             $(this.el).html(_.map([
                 this.model.get('id'),
                this.model.get('name'),
                this.model.get('age')
             ],function(val, key){
                 return ' < td >' + val + ' </ td >';
             }))
            
            return this;
         }
     })

其次显示表格的视图。

     var StudnetCollectionView = Backbone.View.extend({
         
         tagName: 'table',
         
         render: function() {
            $(this.el).empty();
            
              $(this.el).append($(' < tr ></ tr >')).html(_.map([
                  '学号','姓名','年龄'
              ],function(val, key){
                  return ' < th >' + val + ' </ th >';
              }));
            
              $(this.el).append(_.map(this.collection.models,
                function(model, key){
                      return new StudentView({
                          model: model
                      }).render().el;
              }));
            
            return this;
         }
     });

最后显示整个页面的视图。

     var StudnetPageView = Backbone.View.extend({
         render: function() {
             $(this.el).html(new StudnetCollectionView({
                 collection: this.collection
             }).render().el);
         }
     })

同时修改一下显示部分的代码。

    var studentPageView = new StudnetPageView({
             collection: studentCollection,
             el: 'body'
         });
 
         studentPageView.render();

整个main.js的代码如下：

  (function($){
      $(document).ready(function(){
          
          var student1 = new Student({
              id: 10000,
              name: '王小二',
              age: 30
          });
          
         var student2 = new Student({
             id: 20000,
             name: '姚敏',
             age: 26
         });
         
         var student3 = new Student({
             id: 30000,
             name: '科比',
             age: 24
         });
         
         var studentCollection = new StudentCollection([
             student1,
             student2,
             student3
         ]);
         
         var studentPageView = new StudnetPageView({
             collection: studentCollection,
             el: 'body'
         });
 
         studentPageView.render();
         
     });
     
     //set model
     var Student = Backbone.Model.extend({
         //set default values.
         defaults: {
             id: 0,
             name: '',
             age: 0
         }
     });
     
     var StudentCollection = Backbone.Collection.extend({
         model: Student
     });
     
     var StudentView = Backbone.View.extend({
         
         tagName: 'tr',
         
         render: function() {
             $(this.el).html(_.map([
                 this.model.get('id'),
                this.model.get('name'),
                this.model.get('age')
             ],function(val, key){
                 return ' < td >' + val + ' </ td >';
             }))
            
            return this;
         }
     })

     //set view
     var StudnetCollectionView = Backbone.View.extend({
         
         tagName: 'table',
         
         render: function() {
            $(this.el).empty();
            
              $(this.el).append($(' < tr ></ tr >')).html(_.map([
                  '学号','姓名','年龄'
              ],function(val, key){
                  return ' < th >' + val + ' </ th >';
              }));
            
              $(this.el).append(_.map(this.collection.models,
                function(model, key){
                      return new StudentView({
                          model: model
                      }).render().el;
              }));
            
            return this;
         }
     });
     
     var StudnetPageView = Backbone.View.extend({
         render: function() {
             $(this.el).html(new StudnetCollectionView({
                 collection: this.collection
             }).render().el);
         }
     })
     
 })(jQuery);