Einfache BackboneJS API Anruf

Question

Ich versuche, JSON-Daten von einer API mit BackboneJS abrufen, aber ich kann nicht herausfinden, warum mein Code nicht funktioniert.

var foodUrl = 'https://jsonplaceholder.typicode.com/posts/1'; 

var foods = Backbone.Model.extend({ 
    url: foodUrl 
}); 

var foodTypes = Backbone.Collection.extend({ 
    model: foods 
}); 

var Food = new foodTypes(); 

var bar = new foods({ 
    url: foodUrl 
}); 

Food.add(bar); 

console.log(Food.get(bar)); 

Answer 1

Die einfachste Aufruf einer API mit Backbone:

var model = new Backbone.Model({ id: 1 }); 
model.fetch({ url: 'https://jsonplaceholder.typicode.com/posts/' }); 
// GET https://jsonplaceholder.typicode.com/posts/1 

Ein vollständigeres Beispiel würde eine Erweiterung des Standard Backbone ModelurlRoot angeben. Ein Backbone-Modell sollte verwendet werden, um nur ein Objekt eines Datenmodells zu enthalten, während eine Sammlung ein Array von Objekten ist.

// create a model class 
var Food = Backbone.Model.extend({ 
    urlRoot: 'https://jsonplaceholder.typicode.com/posts/', 
}); 

// create an instance of that model class 
var model = new Food({ id: 1 }); 

// make the async API request 
model.fetch(); 
// GET https://jsonplaceholder.typicode.com/posts/1 

Ein Modell fetch erwartet standardmäßig einen JSON-Attribut-Hash.

Eine Abrufanforderung ist asynchron, daher können Sie die Attribute nicht sofort verwenden, Sie müssen dafür einen Rückruf verwenden.

model.fetch({ 
    success: function(){ 
     console.log(model.attributes); 
    } 
}); 

Sie könnten auch ein Array von Objekten mithilfe einer Sammlung abrufen.

var FoodCollection = Backbone.Collection.extend({ 
    model: Food, 
    url: 'https://jsonplaceholder.typicode.com/posts/' 
}); 

var collection = new FoodCollection(); 

collection.fetch({ 
    success: function(){ 
     console.log(collection.models); 
    } 
});