Appending data to same collection after every pagination fetch

backbone.js

Solution

You shouldn't need to make a new view. You should instead listen to the "add" event being triggered on the collection and render new items accordingly.

nextSet: function(){
    this.fetch({add : true}); // The add option appends to the collection
}

This option is detailed in the very good documentation.

Problem

I am trying to populate instagram images using backbone, I have basically 3 models as follows, User model store all the user info related to instagram ``` App.Models.User = Backbone.Model.extend({ defaults: { id: '', access_token: '', userid: '', username: '', full_name: '', profile_picture: '' }, urlRoot: "/api/user/", initurl: function() { return "https://api.instagram.com/v1/users/"+this.get('userid')+"/media/recent/?access_token=" + this.get('access_token'); }, initialize: function() { this.set('id', $('#domdump .id').val()); this.fetch({ success: function(model) { var photos = new App.Collections.Ig_photos([],{ url: model.initurl() }); } }); } }); ``` A model to store the next url for pagination ``` App.Models.Ig_next_url = Backbone.Model.extend({ defaults: { next_url: '' }, next_url:function(){ return this.get('next_url'); } }); ``` A model for the photo ``` App.Models.Ig_photo = Backbone.Model.extend({}); ``` A collection for the multiple photo ``` App.Collections.Ig_photos = Backbone.Collection.extend({ model: App.Models.Ig_photo, initialize: function(model, options) { this.url = options.url; this.nextSet(); }, sync: sync_jsonp, parse: function( response ) { if(response.pagination && response.pagination.next_url && response.pagination.next_url != this.url){ var next_url = new App.Models.Ig_next_url({ next_url: response.pagination.next_url }); this.url = next_url.next_url(); } return response.data; }, nextSet: function(){ this.fetch({ success: function(photos){ var ig_photos_views = new App.Views.Ig_photos_view({ collection: photos}); console.log(photos); } }); } }); ``` Also i have some views that does the render with a load more button that calls the nextset of the collection. What i was trying to achieve is the photos get appended to the collection upon nextset() and the collection get updated with pervious data + new data but right now its getting overwritten. Also is it okay to instantiate new collection from the modelfetch ?

Original source