成功メソッドを取得せず、 'parsererror'のみを表示するが、ブラウザはデータを受け取る

Question

私は2つのコレクションを持っているが、私のBlueCollectionは変数に格納された配列からデータを読み込むが、RedCollectionは異なる配列変数を使用しません。何か不足していますか？

jsFiddle here

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

このデータをフェッチする問題はしかし、私は、ブラウザがデータを受信して​​いることがわかりますが、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"} 
]