Javascript 尝试Backbone.js时，我的集合对象不'；t加载数据

我使用的是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对象数组

但在我的例子中，studentCollection对象的models属性是空数组

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

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

---

有人能告诉我哪里出了问题吗？

一种方法可能是，您可以在

dom

中指定

ul

，例如：

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

和StudentListView为：

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

  // ... existing code
});

而

批准人

为：

var AppRouter = Backbone.Router.extend({        
  // ... existing code     

  list: function(){          
    this.studentList = new StudentCollection();
    this.studentListView = new StudentListView({collection: this.studentList});          
    this.studentList.fetch();
  }
});

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

      }
    });  
  }
});

另一种方法是，不要将集合的

reset

事件绑定为：

window.StudentListView = Backbone.View.extend({
  // ... existing code

  initialize: function(){
    // this.model.on("reset",this.render,this); .. don't bind this event
  },
});

和批准者为：

var AppRouter = Backbone.Router.extend({        
  // ... existing code     

  list: function(){          
    this.studentList = new StudentCollection();
    this.studentListView = new StudentListView({collection: this.studentList});          
    this.studentList.fetch();
  }
});

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

      }
    });  
  }
});

---

为什么不在集合的

parse

方法中返回

response.student

？将根据解析的返回值生成模型。而且无需在

批准程序中执行
$（“#侧栏”）.html（this.studentListView.render（）.el）
。
StudentListView
中指定的
#侧栏
和标记名
ul
是否相同？#侧栏是一个div，我试图在div中创建ul和li，以便显示学生列表。如果将
集合
命名为集合，而不是
模型
，则更容易理解。如果您直接从外部调用
呈现
，那么它就无法在
学生列表视图
中绑定集合的
重置
事件。应用程序初始化时，
dom
中存在哪些元素？学生列表