Question

我正在尝试使用这个非常基本的代码从本地JSON文件将一些数据加载到Backbone Collection中：

  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 }    
]

我做错了什么？

更新：我还尝试在reset调用之上添加.fetch()侦听器，但这也没有触发：

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

不显示任何提示。

更新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

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响应对象的创建方式可能是个好主意。

Answer 2

javascript中的I / O操作几乎总是异步的，因此它也适用于Backbone。这意味着仅仅因为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);
});

Answer 3

fetch（）返回如前所述的“成功”通知，但这只表示服务器请求成功。 fetch（）带回了一些JSON，但它仍然需要将它填充到集合中。

该集合在内容更新后触发“重置”事件。那是集合准备好使用的时候......

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

您的第一次更新看起来就像是这样。我做的唯一不同的事情是将fetch（）放在事件绑定之前。

Answer 4

我认为您需要将{add:true}添加到fetch，

的选项中

如果你将fetch分配给变量，你也会得到结果，但是它不在你想要的集合里面

从JSON文件加载数据到Backbone集合？

4 个答案: