Backbone.js + Rest. Collection is not populated after fetch()

Question

I'm new in Backbone. So I'm trying to fetch data from REST service.

this is my simple code:

$(function () {

    var Entity = Backbone.Model.extend({
        url: function() {
            return 'http://localhost:8080/rest/entity/'+this.id;
        }
    });

    var EntityList = Backbone.Collection.extend({       
        model: Entity,
        url: 'http://localhost:8080/rest/entity'
    });

    var entityList = new EntityList();

    entityList.fetch();

});

my rest service returns next JSON:

[{"id":1387,
  "version":3,
  "entityName":"entity01",
  "entityLabel":"Entity01",
  "entityPluralLabel":"Entity01",
  "attributes":
     [{"id":1425,
       "slot":"D001",
       "version":0,
       "attributeName":"dfield",
       "attributeType":
          {"id":7,
           "description":"Date",
           "attributeType":"date",
           "databaseType":"DATE"
          },
       "options":[],
       "order":2,
       "attributeLabel":"dField",
       "checked":null
      },
      {"id":1424,
       "slot":"S001",
       "version":0,
       "attributeName":"txfield",
       "attributeType":
          {"id":1,
           "description":"Textbox",
           "attributeType":"textbox",
           "databaseType":"STRING"
          },
       "options":[],
       "order":1,
       "attributeLabel":"txField",
       "checked":null
      }
     ]  
 },
 {"id":1426,
  "version":3,
  "entityName":"entity02",
  "entityLabel":"Entity02",
  "entityPluralLabel":"Entity02",
  "attributes":
     [{"id":1464,
       "slot":"D001",
       "version":0,
       "attributeName":"dfield",
       "attributeType":
          {"id":7,
           "description":"Date",
           "attributeType":"date",
           "databaseType":"DATE"
          },
       "options":[],
       "order":2,
       "attributeLabel":"dField",
       "checked":null
      }
     ]
 }
]

In debugger I see that request was sent to REST service and response was recieved, how can I see if entityList collection is populated with recieved data or not? In debugger entityList.models is empty after entityList.fetch();

Am I on right way or somthing is wrong with my code?

Solution

I think you are on the right way. But because Backbone.Collection.fetch() is async, you should check value of entityList.models not right after the method call, but in success callback of fetch.

That is, this code will say that models list is empty:

entityList.fetch();
console.log(entityList.models); // => 0 (collection being fetched)

while this code will print number of models in the collection when it have been populated:

entityList.fetch({success: function(){
    console.log(entityList.models); // => 2 (collection have been populated)
}});

Comments

[idbentley]

additionally, consider overloading the parse function on the collection. It'll let you see the response as it arrives, and I often find that I want to do more than just populate the objects at that time.

[Danyan]

thanks for your answer. you're right about async fetch, I found this suddenly during debugging :)

[Hcabnettek]

This saved me hours of troubleshooting. I was wanting to use the collection right after fetching, but it was empty. Adding a success handler to fetch allowed the collection to populate correctly. Thanks!