我有一个Backbone应用程序,我加载外部Json。 有时我看到json(url)中的图像有时不会,就像获取没有及时完成一样。 有时没有加载的Json是设施(包含图像的URL)和图像(包含图像的URL)
这是我简化的应用程序:
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}));
}
});
有人可以解释我为什么有时候我会在模板中看到图像,有时候却看不到?
这是一些带有一些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';
}
%>
<% }
}
%>
酒店的第一个日志显示了整个酒店,在里面我看到设施。所有的模型,但在ameneties的日志中,就像是之前加载的那样。