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以指定默认urlRoot。 Backbone Model应该只用于包含数据模型的一个对象，而集合是一个对象数组。

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

1 个答案: