Usage

The easiest way to use Slickback is to extend Slickback.Collection or Slickback.PaginatedCollection rather than Backbone.Collection, e.g. given a Backbone.Model named "Product" with a data source at "/products":

var productsCollection = Slickback.PaginatedCollection.extend({
  model: Product,
  url:   '/products'
}); 

It is also possible to use Slickback mixins to achieve the desired functionality with other constructors.

Slick.Grid

An instance of the resulting collection can be passed to Slick.Grid's constructor. Given a block element with a defined height (SlickGrid needs the height to calculate how many rows to display) and an array of column descriptors in "productColumns":

var products = new productsCollection();
var gridOptions = { 
  formatterFactory: Slickback.BackboneModelFormatterFactory
};  
var grid = new Slick.Grid('#grid',products,productColumns,gridOptions);

Slickback.BackboneModelFormatterFactory provides per-column formatters which take account of the fact that a Backbone.Model stores its attributes in a separate object.

Event-driven grid rendering

A Slickback.PaginatedCollection supports SlickGrid events which can be used to ensure that the grid is redrawn every time the contents of the collection are reloaded or otherwise changed:

collection.onRowCountChanged.subscribe(function() {
  grid.updateRowCount();
  grid.render();
}); 

collection.onRowsChanged.subscribe(function() {
  grid.invalidateAllRows();
  grid.render();
});

With these subscriptions in place, loading the collection will result in a grid render:

collection.fetchWithPagination();

Editing the grid

Cell editors can be enabled in column descriptions by specifying an editor constructor such as Slickback.TextCellEditor, Slickback.NumberCellEditor or Slickback.DropdownCellEditor:

{
  id:       'product_name',
  name:     'Name',
  field:    'name',
  editable: true,
  editor:   Slickback.TextCellEditor
}

Slick.Controls.Pager

If pagination is desired, the collection can also be passed to a Slick.Controls.Pager:

var pager = new Slick.Controls.Pager(products,grid,$('#pager'));

The pager instance subscribes to onPagingInfoChanged events, which the collection will publish when it receives new pagination parameters, such as after fetching a page of models. These are used to display the state of pagination. When the pager's controls are manipulated, such as when a user selects the next or previous page, the pager uses the collection's setPagingOptions method to update the collection's pagination parameters. This triggers a new fetch.

See pagination for Slickback's conventions on how to request and return paginated results when sync'ing a Backbone.Collection.