How can we do paging with backbone marionette composite view?

Question

I am new to backbone and marionette. Now i m trying to implement paging with compositeview of marionettejs. Below is my code, what happens here that when a new fetch is done through my custom pager, existing data is getting replaced by new set of data instead of appending. Please help me to overcome this! Thanks in advance.

 define(['text!/Templates/projects/_GroupItem.html', 'collections/projects/groups'], function (ProjectGroupsTmpl, GroupCollection) {
    var GroupItemView = Backbone.Marionette.ItemView.extend({
        tagName: 'li',
        template: _.template(ProjectGroupsTmpl) 
    });
    var CompositeView = Backbone.Marionette.CompositeView.extend({
        template: _.template("<ul id='ulgroups' ></ul>"),
        itemView: GroupItemView,
        itemViewContainer: '#ulgroups',
        initialize: function (params) {
            this.isLoading = false; 
            this.ProjectID = params.id;
            this.collection = new GroupCollection();
            this.getData();
            var self = this;
            $(window).scroll(function () {
                self.checkScroll();
            });
        },
        getData: function () { 
            var that = this;
            this.isLoading = true;
            this.collection.fetch({ 
                data: { ProjectID: this.ProjectID },
                success: function (collection, response, options) { 
                    that.isLoading = false;
                }
            });
        },
        checkScroll: function () { 
            var triggerPoint = 100; // 100px from the bottom 
            if (!this.isLoading && $(window).scrollTop() + $(window).height() + triggerPoint > $(document).height()) { 
                this.collection.page += 1; // Load next page 
                this.getData();
            }
        },
        appendHtml: function (collectionView, itemView, index) {            
            $(this.itemViewContainer).append(itemView.el);
        }
    });
    return CompositeView;
});

Answer 1

I have used backbone.paginator to resolve above issue and it works well. Below are the new code used for that.

Collection:

   define([
  'jquery',
  'underscore',
  'backbone',
  'helper',
  'paginator'
], function ($, _, Backbone) {
    var Groups = Backbone.PageableCollection.extend({
        url: 'projects/_groups',
        mode: "infinite",
        state: {
            pageSize: null 
        },
        queryParams: {
            totalPages: null,
            totalRecords: null 
        }
    });
    return Groups;
});

Marionette CompositeView:

define(['text!/Templates/projects/_GroupItem.html', 'collections/projects/groups'], function (ProjectGroupsTmpl, GroupCollection) {
    var GroupItemView = Backbone.Marionette.ItemView.extend({
        tagName: 'li',
        template: _.template(ProjectGroupsTmpl)
    });
    var CompositeView = Backbone.Marionette.CompositeView.extend({
        template: _.template("<ul id='ulgroups' ></ul>"),
        itemView: GroupItemView,
        itemViewContainer: '#ulgroups',
        initialize: function (params) {
            this.isLoading = false;
            this.ProjectID = params.id;
            this.grpcollection = new GroupCollection([], {
                queryParams: {
                    ProjectID: params.id
                }
            });
            this.collection = this.grpcollection.fullCollection;
            this.getData();
            var self = this;
            $(window).scroll(function () {
                self.checkScroll();
            });
        },
        getData: function () {
            var that = this;
            this.isLoading = true;
            this.grpcollection.fetch({
                success: function (collection, response, options) {
                    if (response.length > 0) {
                        that.isLoading = false;
                    }
                }
            });
        },
        getNextPage: function () {
            var that = this;
            this.isLoading = true;
            this.grpcollection.getNextPage({
                success: function (collection, response, options) {
                    if (response.length > 0) {
                        that.isLoading = false;
                    }
                }
            });
        },
        checkScroll: function () {
            var triggerPoint = 100; // 100px from the bottom 
            if (!this.isLoading && $(window).scrollTop() + $(window).height() + triggerPoint > $(document).height()) {
                this.getNextPage();
            }
        },
        appendHtml: function (collectionView, itemView, index) {
            $(this.itemViewContainer).append(itemView.el);
        }
    });
    return CompositeView;
});