JSONファイルからBackboneコレクションにデータをロードしますか？

Question

私はこの非常に基本的なコードを使用して、ローカルのJSONファイルからバックボーンコレクションにいくつかのデータをロードしようとしている：コンソール声明で

window.Student = Backbone.Model.extend({ 
    }); 
    window.Students = Backbone.Collection.extend({ 
    model: Student, 
    }); 
    window.AllStudents = new Students(); 
    AllStudents.fetch({ url: "/init.json"}); 
    console.log('AllStudents', AllStudents); 

、AllStudentsは空です。しかし、init.jsonが確実に読み込まれています。それは次のようになります：

[ 
    { text: "Amy", grade: 5 }, 
    { text: "Angeline", grade: 26 }, 
    { text: "Anna", grade: 55 }  
] 

私は間違っていますか？

UPDATE：私も.fetch()呼び出し上記resetリスナーを追加しようとしたが、それはどちらかの発射いない：

は

AllStudents.bind("reset", function() { 
    alert('hello world'); 
}); 
AllStudents.fetch({ url: "/init.json"}); 

んが、警告は表示されません。

UPDATE 2：

$(function(){ 
    window.Student = Backbone.Model.extend({ 
    }); 
    window.Students = Backbone.Collection.extend({ 
    model: Student, 
    }); 
    window.AllStudents = new Students(); 
    AllStudents.url = "/init.json"; 
    AllStudents.bind('reset', function() { 
     console.log('hello world'); 
    }); 
    AllStudents.fetch(); 
    AllStudents.fetch({ url: "/init.json", success: function() { 
     console.log(AllStudents); 
    }}); 
    AllStudents.fetch({ url: "/init.json" }).complete(function() { 
     console.log(AllStudents); 
    }); 
}); 

つだけのコンソール文がさえ三fetch()呼び出しで、表示され、それは空のオブジェクトです：（フルでここに再現）このスクリプトをしようとしています。

私は今、絶対に困惑しています。私は間違って何をしていますか？

JSONファイルはapplication/jsonとして提供されているので、それは何の関係もありません。

Answer 1

私は、あなたが変数にフェッチを割り当てた場合、あなたにも結果になるだろう

、あなたはフェッチのオプションに{add:true}を追加する必要があると思う しかし、そのないあなたが

を望んでいたコレクションの内部

Answer 2

javascriptでのI/O操作はほぼ常に非同期であるため、Backboneも同様です。つまり、AllStudents.fetchが返されただけで、まだデータをフェッチしていません。したがって、console.logステートメントを実行すると、リソースはまだフェッチされていません。あなたはfetchにコールバックを渡す必要があります。

AllStudents.fetch({ url: "/init.json", success: function() { 
    console.log(AllStudents); 
}}); 

または必要に応じて、jQueryのに新しい約束の機能を使用する（fetchは約束を返します）：

AllStudents.fetch({ url: "/init.json" }).complete(function() { 
    console.log(AllStudents); 
}); 

Answer 3

は（フェッチ）として「成功」の通知を返します。すでに述べましたが、それは単にサーバー要求が成功したことを意味します。 fetch（）はJSONをいくつか取り戻しましたが、コレクションに埋め込む必要があります。

内容が更新されると、コレクションは「リセット」イベントを発生させます。コレクションが使用できる状態になったのはそのときです...

AllStudents.bind('reset', function() { alert('AllStudents bind event fired.'); }); 

初めての更新でこれがあったようです。私が違ったのは、イベントバインディングの前にfetch（）を置くことだけでした。

Answer 4

JSONファイル内の属性名と数値以外の属性値は、二重引用符（ ""）である必要があります。一重引用符または二重引用符はエラーを生成し、モデルを作成してコレクションに移入するために使用できるレスポンスオブジェクトは作成されません。

So. jsonファイルの内容を次のように変更した場合：

[ 
    { "text": "Amy", grade: 5 }, 
    { "text": "Angeline", grade: 26 }, 
    { "text": "Anna", grade: 55 }  
] 

空でないコレクションオブジェクトが表示されます。あなたは以下のように、成功と失敗の両方を参照するようにコードを変更することができます

：詳細については

AllStudents.fetch({ 
    url: "/init.json", 
    success: function() { 
      console.log("JSON file load was successful", AllStudents); 
     }, 
    error: function(){ 
     console.log('There was some error in loading and processing the JSON file'); 
    } 
    }); 

を、おそらくAjaxレスポンスオブジェクトが作成される方法に見て良いアイデアだろう。