Question

Whenever I console.log() a Backbone.js Collection, Google Chrome’s console shows the letter “d” unlike the typical “Object” log-entry in Safari or Firefox. Is there a difference?

Also, whenever I console.log() any sub-item in a Collection (e.g., console.log(exampleCollection.models)), I get an empty array. Am I doing something wrong?

Code:

(function($) {
  var Item = Backbone.Model.extend({
    defaults: {
      "sku":"",
      "brand":"",
      "model":"",
      "picture":"placeholder.jpg"
    },
    url: function() {
      return this.id ? 'products/' + this.id : 'products';
    }
  });

  var Items = Backbone.Collection.extend({
    model: Item,
    url: "products"
  });

  var items = new Items;

  items.fetch();

  console.log(items); // shows "d" in Google Chrome along with typical 
                      // object-like drop-down options
  console.log(items.models); //  shows "[]" empty array in console

})(jQuery);

Answer 1

I’m still new at Backbone but I think Jon Saw is right. All of Backbone’s models, collections, views show up as d and it’s littered all over the minified code. If you see d, it’s a good sign you can manipulate it like Backbone objects can.

As for the empty array, I’m suspecting that your server side code isn’t returning the collection correctly. Can you post an example of how you’re handling that request and what you’re sending back?

I think I remember running into a similar problem and the solution was to make sure it’s returning nice json data and that the content-type was application/json. But my memory is hazy.

EDIT: You might want to play with the success and error callbacks available to fetch(), to shed more light on the situation.

EDIT2: This past post might be related to your issue – Getting data to and from server with Backbone

EDIT3: I posted a full backbone example from creating models, adding them to a collection, fetching extra models in the form of a collection from server and adding them to the existing collection (rather than resetting). It has views and subviews mixed in but some of the aspects seemed similar to this question so I am including the reference:

Keeping track of old part of collection and new part