0

我正在使用 Backbone.js，服务器部分是使用 Jax-RS 用 Ja​​va 编写的 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 仍然是一个 [] 即空数组，

谁能告诉我哪里出错了

4

1 回答 1

0

一种方法可能是，您可以指定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() {

      }
    });  
  }
});
于 2013-05-08T15:02:22.260 回答