0

我有一个主干，我在其中获取更多集合，有时集合是空的，有时包含数据，这取决于从数据库中检索的对象。我想知道是否有一种方法可以了解何时获取所有集合然后输出我的模板，因为如果我在一个集合先于另一个集合完成时渲染我的模板，我将看不到图像或其他内容等一些元素，因为不是准备好了吗。

这是我对我的应用程序的看法：

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}));
        } 
    });

现在我在获取房间时调用函数 displayCOMbination，但是如果房间是 esmpty，我看不到例如图像集合的内容，因为我在获取集合图像之前已经渲染。

我该如何解决这个问题？

4

1 回答 1

1

您可以使用 fetches 的返回值，因为它们使用jQuery.ajaxwhich 返回值jQuery.Deferred().promise()如下：

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);
}

或者更简洁地说：

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

它将等待所有提取完成后再运行success

于 2013-08-08T18:09:06.093 回答