Question

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

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

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函数，但是如果房间很空，我看不到例如图像集合的内容，因为我之前已经渲染了集合图像。

我该如何解决这个问题？

Answer 1

你可以使用提取的回报，因为他们使用jQuery.ajax返回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

之前，它将等待所有提取完成

Backbone结束以获取多个集合

1 个答案: