获取成功方法未触发，仅显示'parsererror'，但浏览器收到数据

Question

我有两个集合，我的 BlueCollection 可以很好地从存储在变量中的数组加载数据，但是我的 RedCollection 在从不使用变量的不同数组中获取数据时遇到一些问题。我错过了什么吗？

BlueCollection = Backbone.Collection.extend({
  model: BlueModel,
});

RedCollection = Backbone.Collection.extend({
  model: RedModel,
  url: 'data/data.json' // It is from http://www.localhost:3000/data/data.json
});

BlueCollection 加载此数据没有问题。

var blue = [
  {id: 1, title: 'blue 1 - '},
  {id: 2, title: 'blue 2 - '},
  {id: 3, title: 'blue 3'}
];

但 RedCollection 在获取此数据时遇到问题

// http://www.localhost:3000/data/data.json
[
  {id: 1, title: 'red 1 - '},
  {id: 2, title: 'red 2 - '},
  {id: 3, title: 'red 3'}
]

然而，当我检查 firebug 时，我看到浏览器收到了数据，但是 fetch success 方法从未触发，只有 complete 方法触发消息 parsererror

完整代码是这样的：

var blue = [
    {id: 1, title: 'blue 1 - '},
  {id: 2, title: 'blue 2 - '},
  {id: 3, title: 'blue 3'}
];

// http://www.localhost:3000/data/data.json
/* No variable, this json should be fetched from RedCollection
[
    {id: 1, title: 'red 1 - '},
  {id: 2, title: 'red 2 - '},
  {id: 3, title: 'red 3'}
]
*/

BlueModel = Backbone.Model.extend({});
RedModel = Backbone.Model.extend({});

BlueCollection = Backbone.Collection.extend({
  model: BlueModel,
});

RedCollection = Backbone.Collection.extend({
  model: RedModel,
  url: 'http://www.localhost:3000/data/data.json'
  /* 
        [
            {id: 1, title: 'red 1'},
        {id: 2, title: 'red 2'},
        {id: 3, title: 'red 3'}
        ]
    */
});

BlueView = Backbone.View.extend({
  initialize: function() {
    this.collection = new BlueCollection(blue);
    this.render();
  },

  render: function() {
    var self = this;
    _.each(this.collection.models, function(item) {
        self.addAll(item);
    }, this);
  },

  addAll: function(item) {
    $('#blue').append(item.get('title'));
  }
});

RedView = Backbone.View.extend({
  initialize: function() {
    this.collection = new RedCollection; 

    this.collection.fetch({ 
            success: function () {
            console.log('Success'); // Never shows, but console shows content loaded
          },
          error: function(xhr, textStatus) {
                console.log(xhr);
            },  
          complete: function(xhr, textStatus) {
                console.log(textStatus); // Only this log shows with: parsererror
            }
        });
    this.render();
  },

  render: function() {
    var self = this;

    _.each(this.collection.models, function(item) {
        self.addAll(item);
    }, this);
  },

  addAll: function(item) {
    $('#red').append(item.get('title'));
  }
});

blueview = new BlueView;
redview = new RedView;

Answer 1

我记得 json 属性必须在 "" 里面。像这样修改 json：

[
  {"id": 1, "title": "red 1 - "},
  {"id": 2, "title": "red 2 - "},
  {"id": 3, "title": "red 3"}
]

获取成功方法未触发，仅显示'parsererror'，但浏览器收到数据

Fetch success method not triggering, only showing 'parsererror', but browser receives data

json

fetch

backbone.js