简单的 BackboneJS API 调用

Question

我尝试使用 BackboneJS 从 API 中检索 JSON 数据，但我无法弄清楚为什么我的代码无法正常工作。

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

使用 Backbone 对 API 的最简单调用：

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

一个更完整的示例包括扩展 Backbone Model to specify the default urlRoot。 Backbone 模型应该只包含数据模型的一个对象，而集合是一组对象。

// 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

默认情况下模型提取期望接收 JSON 属性散列。

获取请求是异步的，因此您无法立即使用属性，您需要为此使用回调。

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

您还可以使用集合获取一组对象。

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);
    }
});

简单的 BackboneJS API 调用

Simple BackboneJS API call

javascript

backbone.js