d1b1
6/19/2014 - 2:48 PM

Backbone Paginationer - Code Example for using Collection Plugin and View Search Options.

Backbone Paginationer - Code Example for using Collection Plugin and View Search Options.

// Working model of how to use the Backbone.Paginator Plugin.

var defaults = {
    queryParams: {
      pageSize: '_limit',
      currentPage: '_page',
      totalPages: null,
      totalRecords: null,
    },
    state: {
      firstPage: 1,
      pageSize: 10,
    },
    // Query Method - This is called in the view
    // when the collection parameters change. It
    // handles the queryParams and State changes
    // and wraps the calls to keep the View easy
    // to read.
    query: function(opts) {
      var self = this;

      // Reset the State
      this.state.firstPage = 1;
      this.state.currentPage = null;
      this.state.totalPages = null;
      this.state.totalRecords = null;

      // Reset the queryParams
      this.queryParams.totalPages = null;
      this.queryParams.totalRecords = null;

      // If we have other query fields. then
      // we need to remove them in case they
      // are not used in the next call.

      _.each(this.flds, function(k) {
        self.state[k] = null;
        self.queryParams[k] = null;
      });

      this.flds = [];
      _.each(opts, function(v, k) {
        if (k) {
          self.state[k] = v;
          self.queryParams[k] = v;
          // Store the fields.
          self.flds.push(k);
        } else {
          self.state[k] = null;
        }
      });

      return this;
    },
    parseRecords: function (resp) {
      return resp.data;
    },
    parseLinks: function (resp, xhr) {
      return resp.pagination;
    },
    parseState: function (resp, queryParams, state, options) {
      if(resp.data === null){
        return false;
      }
      return {
        totalRecords: resp.pagination.totalItems,
        current: resp.pagination.current,
        last: resp.pagination.last,
        totalPages: resp.pagination.totalPages,
        next: resp.pagination.next,
      };
    }
  };
  
  var Models = {
    Cheese:  Backbone.Model.extend({
        validate: function(attrs, options) {
          // Required fields check
        },
        urlRoot: 'http://api.formagg.io/cheese'
      }),
    Maker:  Backbone.Model.extend({
        validate: function(attrs, options) {
          // Required fields check
        },
        urlRoot: 'http://api.formagg.io/maker'
      })
  }
  // Applies defaults and extends the PageableCollection class.
  
  var Cheeses = Backbone.PageableCollection.extend(
    _.defaults(_.clone(defaults), {
      model: Models.Cheese,
      url: 'http://api.formagg.io/cheeses/search'
    }
  );
  
  var Makers = Backbone.PageableCollection.extend(
    _.defaults(_.clone(defaults), {
      model: Models.Maker,
      url: 'http://api.formagg.io/makers/search'
    }
  );
    
  // Usage in a view.

  var CheeseListView = Backbone.Layout.extend({
    template: <<Template for Table and its Search Form>>,,
    initialize: function() {
      this.collection = new Makers();
    },
    events: {
      'change .input': 'search'
    },
    search: function(e) {
      e.preventDefault();
      
      // collection#query wraps the form and provides
      // an helper for sending a form to the collection

      this.collection.query( $(e.currentTarget).serializeObject() )
        .fetch({  
          // Optional Success and Failure for XHR request.
        });
    },
    list: function() {
      // Code to loop the collection and when the collection sync event is triggered.
    }
  });