Question

My collection.fetch doesn’t work and doesn’t get the models to be rendered.
I have this on my router.js

itemcollection = new ItemCollection();
        itemcollection.fetch();
        ItemListView.render();
        CartListView.render();
    }

my itemcollection.js

define([
'underscore',
'backbone',
'model/item_model'
  ],function(_, Backbone, Item){
var ItemCollection = Backbone.Collection.extend({
    model: Item,
    url: 'http://posbeta.interprisesolutions.com/POSMobileConnector/Product/loaditembycategory/Event Materials',
    parse: function(response) {
    return response.Items;
  }
});
return ItemCollection;
});

my view:

initialize: function(){
  ItemCollection.bind("reset", this.render );
},
render: function(){
  var data = {
    items: itemcollection.models
  }
  var compiledTemplate = _.template( ItemListTemplate , data);
  $("#itemContainer").html( compiledTemplate );

},

The funny thing is when i debug it using firebug it renders properly when i remove the breakpoint it doesn’t display anything. any ideas?

Answer 1

Bear in mind that fetch is asynchronous – it returns immediately, before the data has been loaded.

You could try something like:

itemcollection = new ItemCollection();
itemcollection.fetch({
  success: function () {
    ItemListView.render();
    CartListView.render();
  }
});

Alternatively, you could listen on the collection’s reset event.