Fetch-Erfolgsmethode löst nicht aus, zeigt nur 'parsererror', aber Browser empfängt Daten

Question

Ich habe zwei Sammlungen, meine BlueCollection funktioniert gut Daten aus einem Array in einer Variablen geladen, aber meine RedCollection hat Probleme beim Abrufen von Daten aus einem anderen Array die keine Variable verwendet. Fehle ich etwas?

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 hat keine Probleme mit diesen Daten geladen werden.

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

Aber RedCollection hat Probleme Abrufen dieser Daten

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

Allerdings, wenn ich Firebug überprüfen, wie ich sehe, dass der Browser die Daten empfängt, sondern holen success Methode nie auslöst, nur complete Methode löst mit der Nachricht parsererror

Der vollständige Code ist dies:

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

Wie ich mich erinnere, muss eine JSON-Eigenschaft innerhalb "" sein. Ändern Sie den JSON wie folgt:

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