Backbone fetch来获取集合

时间:2014-08-11 01:40:26

标签: javascript backbone.js

我有一组记录,我试图在提取后登录到控制台。我不确定为什么控制台在记录集合时记录了很多方法而不是记录中的数据。

如何记录集合中的数据?

集合中的记录包含:

{
  "color": "yellow",
  "date": "March 24, 2014",
  "manufacturer": "Ford",
  "name": "Mustang"
},

{
  "color": "green",
  "date": "July 1, 2014",
  "manufacturer": "Toyota",
  "name": "Corolla"
},

{
  "color": "red",
  "date": "February 2, 2014",
  "manufacturer": "Honda",
  "name": "Civic"
}

这是我的Backbone.js代码:

var TheModel = Backbone.Model.extend({
  defaults: {
    'id': 'null',
    'color': '',
    'date': '',
    'name': ''
  }
});

var TheCollection = Backbone.Collection.extend({
  models: TheModel,

  url: 'https://api.mongolab.com/api/1/databases/testdatabase/collections/Content?apiKey=xcdsdfsdczdcdsdfs'
});

var aCollection = new TheCollection();

var TheView = Backbone.View.extend({
  initialize: function () {
    this.collection = aCollection.fetch();   
  },

  render: function () {
    console.log('this.collection');
    console.log(this.collection);

    return this;
  }
})

var aView = new TheView();
aView.render();

1 个答案:

答案 0 :(得分:3)

this.collection将是Backbone集合的一个实例,它是一个包含大量方法和数据的对象(大部分都是你不会关心的)。如果您只想查看模型,那么this.collection.models适合您:

  

模型 collection.models

     

对集合内JavaScript模型数组的原始访问。

但是,这会留下一系列对象,这些对象包含许多您不关心的方法和数据。

如果您只是想要数据,那么您可能需要this.collection.toJSON()

  

toJSON collection.toJSON([options])

     

返回一个数组,其中包含集合中每个模型的属性hash(通过toJSON)。

如果您在任何地方覆盖了toJSON,那么您可以通过以下方式提取模型attributes来解决这个问题:

console.log(this.collection.map(function(m) { return m.attributes })

或者,如果您不想在控制台中处理实时引用:

console.log(this.collection.map(function(m) { return _(m.attributes).clone() })

_(m.attributes).clone()调用几乎就是模型的默认toJSON


您在this.collection上调用方法的问题源于此:

this.collection = aCollection.fetch();

fetch调用返回jqXHR(与$.ajax返回的内容相同),而不是集合本身。您希望初始化看起来更像这样:

initialize: function() {
    this.collection = aCollection;
}

或者你可以让Backbone为你加上这个集合。骨干视图会为您的视图实例附加一些选项collection is one of these,因此您可以省略initialize并说:

var aView = new TheView({ collection: aCollection });