将数据从 JSON 文件加载到 Backbone 集合中? [英] Load data into a Backbone collection from JSON file?

问题描述

我正在尝试使用以下非常基本的代码将一些数据从本地 JSON 文件加载到 Backbone 集合中:

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

在控制台语句中，AllStudents 为空.但是 init.json 肯定正在加载.它看起来像这样:

<预><代码>[{ 文字:艾米"，等级:5 }，{ text: "Angeline", 等级: 26 },{ 文字:安娜"，等级:55 }]

我做错了什么?

UPDATE:我还尝试在 .fetch() 调用上方添加一个 reset 侦听器，但这也没有触发:

AllStudents.bind("reset", function() {alert('你好世界');});AllStudents.fetch({ url: "/init.json"});

没有警报出现.

更新 2:尝试此脚本(在此处完整转载):

$(function(){window.Student = Backbone.Model.extend({});window.Students = Backbone.Collection.extend({型号:学生，});window.AllStudents = new Students();AllStudents.url = "/init.json";AllStudents.bind('reset', function() {console.log('你好世界');});AllStudents.fetch();AllStudents.fetch({ url: "/init.json", 成功: function() {控制台日志(所有学生)；}});AllStudents.fetch({ url: "/init.json" }).complete(function() {控制台日志(所有学生)；});});

在第三个 fetch() 调用中甚至只出现了一个控制台语句，并且它是一个空对象.

我现在完全不知所措.我做错了什么?

JSON 文件作为 application/json 提供，因此与此无关.

解决方案

JSON 文件中的属性名称和非数字属性值必须用双引号 (" ") 括起来.单引号或无引号会产生错误，并且不会创建可用于创建模型和填充集合的响应对象.

所以.如果将json文件内容改为:

<预><代码>[{ "text": "Amy", 等级: 5 },{ "text": "Angeline", 等级: 26 },{文本":安娜"，等级:55}]

您应该看到非空集合对象.

您可以更改代码以查看成功和失败，如下所示:

 AllStudents.fetch({url: "/init.json",成功:函数(){console.log("JSON 文件加载成功", AllStudents);},错误:函数(){console.log('加载和处理 JSON 文件时出错');}});

有关更多详细信息，可能最好查看 ajax 响应对象的创建方式.

I'm trying to load some data into a Backbone Collection from a local JSON file, using this very basic code:

  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);

In the console statement, AllStudents is empty. But init.json is definitely being loaded. It looks like this:

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

What am I doing wrong?

UPDATE: I've also tried adding a reset listener above the .fetch() call, but that's not firing either:

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

No alert appears.

UPDATE 2: Trying this script (reproduced here in full):

$(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);
  });
});

Only one console statement even appears, in the third fetch() call, and it's an empty object.

I'm now absolutely baffled. What am I doing wrong?

The JSON file is being served as application/json, so it's nothing to do with that.

解决方案

The attribute names and non-numeric attribute values in your JSON file must be double quoted (" ") . Single quotes or no-quotes produces errors and response object is not created that could be used to create the models and populate the collection.

So. If you change the json file content to :

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

you should see the non-empty collection object.

You can change your code to see both success and failure as below:

    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');
    }
  });

For more details, probably it will be a good idea to look in to the way ajax response objects are created.

这篇关于将数据从 JSON 文件加载到 Backbone 集合中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！