Backbone sometimes load sometimes not - json

Question

I have a Backbone app where I load external Json.
Sometimes I see the image inside the json(url) sometimes not, like the fetch doesn't finish in time.
Json that doesn't load sometimes are amenities (that contains url to image) and image (that contains url to image)
This is my app simplified:
HotelModel = Backbone.Model.extend({
initialize: function() {
// because initialize is called after parse
_.defaults(this, {
amenities: new AmenityCollection(),
image: new ImageCollection()
});
},
parse: function(response) {
if (_.has(response, "image")) {
this.image = new ImageCollection(response.image, {
parse: true
});
delete response.image;
}
if (_.has(response, "amenities")) {
this.amenities = new AmenityCollection(response.amenities, {
parse: true
});
delete response.amenities;
}
return response;
},
toJSON: function() {
var json = _.clone(this.attributes);
json.rooms = this.rooms.toJSON();
return json;
},
addAmenity: function(amenities, options) {
return this.amenities.add(amenities, options);
},
addRoom: function(rooms, options) {
return this.rooms.add(rooms, options);
},
addImage: function(image, options) {
return this.image.add(image, options);
}
});
AmenityModel = Backbone.Model.extend({});
ImageModel = Backbone.Model.extend({});
HotelCollection = Backbone.Collection.extend({
model: HotelModel,
}
});
AmenityCollection = Backbone.Collection.extend({
model: AmenityModel,
getAmenitiesByHotelId: function(hotelId) {
return this.where({
hotelId: hotelId
});
}
});
ImageCollection = Backbone.Collection.extend({
model: ImageModel,
getImagesByHotelId: function(hotelId) {
return this.where({
hotelId: hotelId
});
}
});
var CombinationView = Backbone.View.extend({
template: _.template($("#hotel-list-template").html()),
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.hotels.on("sync", this.hotelsLoaded, this);
this.amenities.on("sync", this.amenitiesLoaded, this);
this.image.on("sync", this.imagesLoaded, this);
this.hotels.fetch();
},
render: function(){
this.$el.html('Loading...');
return this;
},
hotelsLoaded: function(){
this.image.fetch();
this.amenities.fetch();
},
amenitiesLoaded: function(){
this.hotels.each(function(hotel) {
hotel.addAmenity(this.amenities.getAmenitiesByHotelId(hotel.id));
}, this);
},
imagesLoaded: function(){
this.hotels.each(function(hotel) {
hotel.addImage(this.image.getImagesByHotelId(hotel.id));
}, this);
},
displayCombinations: function(){
$(this.el).html(this.template({hotels: this.hotels.models}));
}
});
Can someone explain me why sometimes i see the image in the template and sometimes not?
This is a little piece of template with some console.log
<% _.each(hotels, function(hotel1, index_hotel) { %>
<%
console.log('hotel:');
console.log(hotel1);
console.log('amenities');
console.log(hotel1.amenities.models); %>
<% _.each(hotel1.amenities.models, function(am) {
//NOT ENTER HERE SOMETIMES!!!
if(am.attributes.image!=''){
var src = '<?php echo(base_url()); ?>/img/backend/ameneties/' + am.attributes.image;
}
else{
var src = '<?php echo(base_url()); ?>/img/backend/ameneties/NO_IMG.jpg';
}
%>
<% }
}
%>
The first log of hotel show the full hotel and inside it I see amenities.models with all, but in the log of ameneties is empoty like is t was loaded before.