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.
}
});