Backbone有时负载有时不加载

时间:2013-07-18 07:32:55

标签: json backbone.js

我有一个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的日志中,就像是之前加载的那样。

0 个答案:

没有答案