web-dev-qa-db-ja.com

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

この非常に基本的なコードを使用して、ローカル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"});
_

警告は表示されません。

PDATE 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);
  });
});
_

3番目のfetch()呼び出しでは、コンソールステートメントが1つだけ表示され、それは空のオブジェクトです。

私は今、完全に困惑しています。何が悪いのですか？

JSONファイルはapplication/jsonとして提供されるため、それとは関係ありません。

javascriptjsonbackbone.js
17
Richard

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

そう。 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応答オブジェクトが作成される方法を調べることをお勧めします。

18
Praym

JavaScriptのI/O操作はほとんどの場合非同期であり、バックボーンでも同様です。つまり、AllStudents.fetchが返されましたが、まだデータをフェッチしていません。あなたがあなたのconsole.logステートメント。リソースはまだフェッチされていません。 fetchにコールバックを渡す必要があります：

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

または、オプションで、jQueryの新しいpromise機能を使用します（fetchはpromiseを返します）：

AllStudents.fetch({ url: "/init.json" }).complete(function() {
    console.log(AllStudents);
});
10
Linus Gustav Larsson Thiel

fetch（）は、すでに述べたように「成功」​​通知を返しますが、それは単にサーバー要求が成功したことを意味します。 fetch（）はJSONを戻しましたが、それでもコレクションに入れる必要があります。

コレクションは、コンテンツが更新されると「リセット」イベントを発生させます。コレクションが使用できるようになったときです...

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

最初のアップデートでこれがあったようです。私が違ったことをした唯一のことは、fetch（）をイベントバインディングの前に置くことでした。

1
Mr The Falcon

追加する必要があると思います{add:true}フェッチのオプションに、

フェッチを変数に割り当てた場合、結果も取得されますが、必要なコレクション内にはありません

0
mindandmedia