Appending data to same collection after every pagination fetch

Question

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 ?

Answer 1

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.