我有一个 Backbone 应用程序,我在其中加载外部 Json。有时我看到 json(url) 中的图像有时看不到,比如 fetch 没有及时完成。有时不加载的 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';
}
%>
<% }
}
%>
酒店的第一个日志显示了完整的酒店,在里面我看到了设施。所有的模型,但在 amenties 的日志中是空的,就像之前加载的一样。