0

私は 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 を追加し、明示的に配列に割り当てられたモデルを作成しました。

しかし、それでも私のstudentList.modelsは[]、つまり空の配列です。

誰が私が間違っているのか教えてもらえますか

4

1 に答える 1

0

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

      }
    });  
  }
});
于 2013-05-08T15:02:22.260 に答える