How to clear backbone collection before fetching new data?

Question

Hi all i have been working on backbone application where images are being added and existing images are being deleted or edited. Now am using router for the various section like gallery, forms but when i edit something in gallery goes back to forms and come back i am not getting the changes that i have done earlier. Instead it shows old data. I need to refresh i mean CTRL+F5 to see that changes which is not good.

I tried the .clear and .reset its resetting the collection and model but doesn't effects the data inside the collection. Can any one please help me that where i am going wrong.

Below is code for Collection and model :

var GalleryImage = Backbone.Model.extend({});

 var GalleryImages = Backbone.Collection.extend({
model : GalleryImage,
url: '######',
initialize : function(){


    this.reset();
    if(this.reset())
    {
        console.log("model reset", GalleryImage.cid)
    }else{
        console.log("model not set")
    }

    this.on("reset", this.loadImagesView,this);
    this.on("error", this.errorMessage,this);
        //console.log(GalleryImages.get(0))

},
loadImagesView : function(){
    //console.log(this);
    //console.log(this.CollView.$el);
    if(!this.CollView){
        this.CollView = new GalleryImagesView({collection:this})
    }
        this.CollView.render(); 

},
errorMessage : function(){
    jQuery('#imageBlocksDiv').html('<span id="noMsg"><h4>No images to display.</h4></span>');
}

});

And for the router is :

initGallery : function(){

            jQuery('#invset').hide();
            jQuery('#imagelist').children().eq(0).append(jQuery('.floor_img').find('#box').css({'z-index':'1','position':'relative','margin-top':'0px','margin-left':'0px'}));
            pinterest(undefined);
    jQuery("#box").show();
            jQuery('#invset').hide();
            jQuery('#inventorycontent').hide();
    jQuery("#boxnews").hide();
    jQuery("#boxzip").hide();
    jQuery(".select").attr('style','display:block');
    jQuery(".select").attr('id','ugallerygal');
    jQuery(".pagetitle").html('Gallery');
    var that = this,projectId = jQuery('#ugallerygal').val();
    jQuery('#imageBlocksDiv').html('');
    var imgObj = new GalleryImages();

    //this.reset(imgObj);

    imgObj.fetch({data: jQuery.param({projectId: projectId, add:true, reset:true}), success:function(){
                      console.log(imgObj)
                      imgObj.trigger("reset");
          },
          error : function(){
          imgObj.collection.trigger("error");
          }
    });

},

Not only this i have a section that when user click on images the image open up and by clicking anywhere on image the can place a point and add details in that point which i am storing in parse, However the value on changes get saved but when i come back to the image the older position and number images are displayed instead of the newer one and updated point that are stored in parse. I guess the issue is same for both state so the the solution for one will work for all.

Any help is deeply appreciated. Thanking in advance

Thanking you, Santosh Upadhayay

score 0 · Answer 1 · answered Nov 04 '13 at 15:21

Problem could be with the order of reset and adding reset listener. Try changing

this.reset();
if(this.reset())
{
    console.log("model reset", GalleryImage.cid)
}else{
    console.log("model not set")
}

this.on("reset", this.loadImagesView,this);
this.on("error", this.errorMessage,this);

to

this.on("reset", this.loadImagesView,this);
this.on("error", this.errorMessage,this);
this.reset();
if(this.reset())
{
    console.log("model reset", GalleryImage.cid)
}else{
    console.log("model not set")
}

I tried but that doesnt effect is there any other way as we edit and saved something click on other link but the page is not refreshed and when again click back to the link it shows older stuff — Santosh Upadhayay, Nov 07 '13 at 07:55

How to clear backbone collection before fetching new data?

1 Answers1