jquery - Backbone end to fetch multiple collection -

i have in backbone fetch more collection, collection empty contain data depends of object retrieval database. want know if there method understand when collection fetched , output template, because if render template when collection finish before can't see elements image or other things because isn't ready yet.

this view of app:

var combinationview = backbone.view.extend({          template: _.template($("#hotel-list-template").html()),          showrooms: function(event){             var id = $(event.currenttarget).attr('id').substr(5);         },          initialize: function(){              this.hotels = new hotelcollection([],{                  url: '<?php echo base_url(); ?>json_upload/hotels_details_<?php echo($this->session->userdata("id")); ?>.json'              });               this.amenities = new amenitycollection([], {                  url: '<?php echo base_url(); ?>json_upload/hotels_details_amenities_<?php echo($this->session->userdata("id")); ?>.json'              });              this.image = new imagecollection([], {                  url: '<?php echo base_url(); ?>json_upload/hotels_details_images_<?php echo($this->session->userdata("id")); ?>.json'              });              this.rooms = new roomcollection([], {                  url: '<?php echo base_url(); ?>json_upload/rooms_<?php echo($this->session->userdata("id")); ?>.json'              });               this.hotels.on("sync", this.hotelsloaded, this);              this.amenities.on("sync", this.amenitiesloaded, this);              this.image.on("sync", this.imagesloaded, this);             this.rooms.on("sync", this.roomsloaded, this);              this.hotels.fetch();          },          render: function(){              this.$el.html('loading...');              return this;          },          hotelsloaded: function(){              this.image.fetch();             this.amenities.fetch();              var self = this;             this.rooms.fetch({                 success: function(){                     self.displaycombinations();                  }             });         },          amenitiesloaded: function(){              console.log('amenities');             this.hotels.each(function(hotel) {                  hotel.addamenity(this.amenities.getamenitiesbyhotelid(hotel.id));              }, this);          },         imagesloaded: function(){              console.log('images');             this.hotels.each(function(hotel) {                  hotel.addimage(this.image.getimagesbyhotelid(hotel.id));              }, this);          },         roomsloaded: function(){              console.log('rooms');             this.hotels.each(function(hotel) {                  hotel.addroom(this.rooms.getroomsbyhotelid(hotel.id));              }, this);          },         displaycombinations: function(){              $(this.el).html(this.template({hotels: this.hotels.models}));         }      }); 

now call function displaycombination when rooms fetched, if rooms esmpty can't see example content of collection of image because have rendered before collection image fetched.

how can solve this?

you use return fetches, use jquery.ajax returns jquery.deferred().promise() this:

hotelsloaded: function(){      var self = this;     var success = function(){         self.displaycombinations();      };     var images = this.image.fetch();     var amenities = this.amenities.fetch();      var rooms = this.rooms.fetch();     $.when(images, amenities, rooms).done(success); } 

or more succinctly:

hotelsloaded: function(){      var self = this;     $.when(this.image.fetch(), this.amenities.fetch(), this.rooms.fetch()).done(function(){         self.displaycombinations();      }); } 

it wait fetches complete before running success