how to handle pagination with Backbone.Marionette

Question

I have a collection that is populated using from an external API, the API returns a number of objects + paging details for further objects, then I would like to show probably only a subset of these objects in my views, but allow for further paginated view too

To explain my situation a bit better:

1. fetch 20 results from the server, get pagination data for further pages
2. show 10 results + more button
3. clicking more, shows 10 results + more button
4. clicking more, fetches 20 results from server, shows 10 results + more button ...

what would be your solution? I've found Backbone.Paginator, but I don't know how well does it integrates with Marionette, or if there exists already a Backbone.Marionette.Paginator extension :)

Quaky

Answer 1

Backbone.Paginator provides extensions and additional methods and features on top of Backbone collections, which means they should be usable from any type of Backbone view, including Marionette.

You shouldn't have to do anything special to integrate Marionette and Paginator, then. You would build a view that takes advantages of the additional methods and features, but you would base that view off Marionette's views instead of standard Backbone views. In this case, I would recommend either a collection view or a composite view from Marionette, rendering each item from the paged collection individually.

Emelina

Answer 2

Here is how I solved the problem of integrating Marionette and backbone.paginator. It was 'straightforward' in some sense, but as a new-comer to backbone.marionette it vexed me for some time! I hope this is useful to someone.

Use the serializeData method on the compositeView to render information from the paginator's paginator_ui object.

/* a view for presenting a backbone.paginator collection,
 * and for presenting and handling its pagination UI element */
App.module('Views', function(Views, App, Backbone, Marionette, $, _) {
    Views.PaginatedCollectionView = Backbone.Marionette.CompositeView.extend({
        template: 'backbone/templates/paginated_collection_view',
        itemView: App.Views.StructureView,

        /* I'm not using a model, but you could if you
         * wanted? You might even merge the two */
        serializeData: function(){
          if (this.model){
            data = this.model.toJSON();
          } else {
            // we want to render the paginator_ui in our templates
            data = this.collection.paginator_ui;
          }

          return data;
        }
    });
});

Foreignborn