Question

我使用的是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”，它给出了一个Student Object数组。

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

因此我在StudentCollection中添加了一个方法解析，并明确地将模型分配给数组

但我的studentList.models仍然是[]，即空数组，

有人可以告诉我哪里出错了吗

Answer 1

可以采用一种方法，您可以在ul中最初指定dom，如：

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

只需从集合解析中返回response.student：

window.StudentCollection = Backbone.Collection.extend({
  // ... existing code

  parse: function(response){            
    return response.student;
  }
});

并且StudentListView为：

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

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() {

      }
    });  
  }
});

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

1 个答案: