尝试Backbone.js，我的集合对象没有加载数据

Trying Backbone.js, my collection object doesn't loads the data

本文关键字：加载 数据 对象 集合 Backbone js 我的 尝试      更新时间：2023-09-26

我使用的是Backbone.js，服务器部分是使用Jax-RS用Java编写的Rest服务，

我从服务器得到的响应如下，

{
"student":[
        {"collegeName":"Hollywood Inc.","id":"12","name":"Jim Carry","salary":"100"},
        {"collegeName":"Hollywood Inc.","id":"13","name":"Nicholas Cage","salary":"400"},
        {"collegeName":"Hollywood Inc.","id":"14","name":"Edi Murphy","salary":"567"},
        {"collegeName":"Hollywood Inc.","id":"15","name":"Will Smith","salary":"500"},
        {"collegeName":"Hollywood Inc.","id":"16","name":"Jack Nicholsan","salary":"234"}
        ]
}

现在我的客户端backbone.js代码如下，

var fn01 = function(){
try{
window.Student = Backbone.Model.extend();
window.StudentCollection = Backbone.Collection.extend({
    model: Student,
    url: "http://localhost:8081/rest/firstRest/demo/get",
    parse: function(response){            
        var studentArray = new Array();
        _.each(response.student,function(std){
            (function(student){
                studentArray.push(new Student({id: student.id, name: student.name}));                    
            })(std);                
        });
        this.models = studentArray;
        return this.models;
    }
});
window.StudentListView = Backbone.View.extend({
   tagName: "ul",
   initialize: function(){
       this.model.on("reset",this.render,this);
   },
   render: function(evt){
       _.each(this.model.models, function(student){
           $(this.el).append(new StudentListItemView({model: student}).render().el);
       },this);
       return this;           
   }
});
window.StudentListItemView = Backbone.View.extend({
    tagName: "li",
    template: _.template($("#tpl-student-list-item").html()),
    render: function(evt){
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});
var AppRouter = Backbone.Router.extend({        
    routes:{
        "":"list"
    },        
    list: function(){          
      this.studentList = new StudentCollection();
      this.studentListView = new StudentListView({model: this.studentList});          
      this.studentList.fetch();  
      $("#sidebar").html(this.studentListView.render().el);
    }
});
var app = new AppRouter();     
Backbone.history.start();

}catch(e){
   alert(" ERROR "+e);
} 
}
onLoadFn(fn01);

我得到的响应是学生的json对象，这里我要做的是在页面加载取学生从服务器和存储在StudentCollection对象。studentCollection对象有一个属性"models"，它给出了一个学生对象数组。

但在我的情况下，模型属性的studentCollection对象是空数组。

因此我在StudentCollection中添加了一个方法parse，并显式地将模型分配给数组，

但仍然是我的studentList。Models是一个[]，即空数组，

谁能告诉我我哪里错了

一种方法是，您可以在dom中初始指定ul，如:

<div id="sidebar">
  <ul></ul>
</div>

从集合中返回response.student:

window.StudentCollection = Backbone.Collection.extend({
  // ... existing code
  parse: function(response){            
    return response.student;
  }
});

And StudentListView as:

window.StudentListView = Backbone.View.extend({
  // change tagName to el
  el: "#sidebar ul",
  // ... existing code
});

， AppRouter为:

var AppRouter = Backbone.Router.extend({        
  // ... existing code     
  list: function(){          
    this.studentList = new StudentCollection();
    this.studentListView = new StudentListView({collection: this.studentList});          
    this.studentList.fetch();
  }
});

另一种方法是，不绑定集合的reset事件:

window.StudentListView = Backbone.View.extend({
  // ... existing code
  initialize: function(){
    // this.model.on("reset",this.render,this); .. don't bind this event
  },
});

和AppRouter as:

var AppRouter = Backbone.Router.extend({        
  // ... existing code
  list: function(){
    // ... existing code
    var _this = this;          
    this.studentList.fetch({
      success: function() {
        $("#sidebar").html(_this.studentListView.render().el);  
      },
      error: function() {
      }
    });  
  }
});
相关文章：