Backbone.Marionette and Backbone.Paginator. CompositeView rerendering

Question

I'm working on Infinite Pagination (http://addyosmani.github.io/backbone.paginator/examples/infinite-paging/index.html)

I'm using CompositeView for pagination view.

And I've got the following problem. Each time after I get new portions of data Paginator's collection removes old data and adds new so it makes CompositeView to rerender and erase old results.

How can I resolve this problem? I'm thinking about disabling rerender functionality but how it should be done properly?

Thanks in Advance!

var BaseFeedChronoCompositeView = Backbone.Marionette.CompositeView.extend({
    tagName: "div",
    template: _.template(ChronoFeedComposite_html),
    itemView: Article,                
    events: {
        'click #loadmore-button-manual': function (e) {
            e.preventDefault();
            this.collection.requestNextPage();
    },

    appendHtml: function (collectionView, itemView, index) {
        collectionView.$("#chronoFeed-content").append(itemView.$el);
    }
});

Here is the basic code. this.collection.requestNextPage() - sends request for data to server. After it gets data this.collection removes old models and adds new models.

Composite View is listening for these events and removes itemViews for old models and append itemViews for new models.

And I need CompositeView not to remove old itemViews.

Answer 1

Im not quite sure how this paginator works, as I've never used it. But I think the easiest way to fix this is to make sure that your Collection doesnt remove old models. I assume that when your data is being returned it is doing a set on the collection. If you look at the backbone docs you can see that you can disable this method from removing models http://backbonejs.org/#Collection-set

If you'd like to customize the behavior, you can disable it with options: {add: false}, {remove: false}, or {merge: false}.

So when you are updating the collection, instead of just calling

myCollection.set([o1,o2,o3]);

you should be doing

myCollection.set([o1,o2,o3], {remove:false});