backbone.jsでフェッチした後にモデルデータを表示するには

Question

私はknockout.jsからのバックボーンに新しいことがあります。私はこの単純なこぶを乗り越えようとしています。私はボタンをクリックして、Chromeのコンソールを見てみると

[{"id": "1233","name": "Karen","grade": "C"},{"id": "1234","name": "Susan", "grade": "F"}] 

が、私は以下を参照してください：

$(function(){ 
    window.Student = Backbone.Model; 

    window.Students = Backbone.Collection.extend({ 
     model: Student, 
     url: 'test.php' 
    }); 

    window.students = new Students(); 
    window.AppView = Backbone.View.extend({ 
     el: $('#container'), 
     initialize: function() { 
      Students.bind('reset', this.render); 
     }, 
     render: function(){ 
      console.log(Students.toJSON()); 
     } 
    }); 

    window.appview = new AppView(); 

$('#test').click(function(){ 
    //var students = new Students(); 
     students.fetch(); 
     var q = students.toJSON(); 
     console.log(q); 
    /*  
     students.create({ 
      name: 'John', 
      grade: 'A' 
     }); */ 
    }) 
}); 

私のサーバーは、以下のJSONを送信：私はこのコードを持っている

まずクリック：

[] - Corrected -just an empty array 

セカンドクリック：

[ 
Object 
    grade: "C" 
    id: "1233" 
    name: "Karen" 
    __proto__: Object 
, 
Object 
    grade: "F" 
    id: "1234" 
    name: "Susan" 
    __proto__: Object 
] 

最初の質問はなぜ2回のクリックかかりますか？ Second：テキストボックス、<li>またはその他のUI要素にグレードを（コレクションとIDの両方として）割り当て/バインドするにはどうすればよいですか（Ajaxがポップインするときにはそれをよりよく観察できます）。

Answer 1

表示されているコンソールメッセージは、クリックイベントハンドラからのメッセージです。レンダリングメソッドからのコンソールメッセージは決して呼び出されません。

fetchは非同期メソッドなので、最初のログメッセージに何も表示されないので、の直後にfetchの後にコールすると、コレクションはフェッチメソッドからまだ入力されていません。

期待どおりに動作させるには、コードを変更する必要があります。

まず、あなたはあなたがコンストラクタに渡されたコレクションのリセットイベントにバインドする必要があるビュー内のビュー次に

//original 
window.appview = new AppView(); 
//new 
window.appview = new AppView({ collection: window.students }); 

をインスタンス化するとき、コレクションに渡す必要があります。

window.AppView = Backbone.View.extend({ 
     el: $('#container'), 
     initialize: function() { 
      _.bindAll(this, 'render'); 
      this.collection.bind('reset', this.render); 
     }, 
     render: function(){ 
      console.log(this.collection.toJSON()); 
     } 
    }); 

今すぐあなたのクリックイベントにコンソールログメッセージをコメントアウト（あなたがインスタンス化されたオブジェクトにバインドする必要があり、そしてあなたのようなオブジェクトの定義は、もともとやっていたではない）、そして、あなたは一度だけクリックする必要がありますレンダリングメソッドからのコンソールログメッセージが表示されます。

$('#test').click(function(){ 
    //var students = new Students(); 
     students.fetch(); 
     //var q = students.toJSON(); 
     //console.log(q); 
    /* 
     students.create({ 
      name: 'John', 
      grade: 'A' 
     }); */ 
    })