How to add filtering parameters to a Slickback request in Backbone.js

published Dec 05, 2012 01:05 by admin ( last modified Dec 10, 2012 11:48 )

Slickback has an object, Slickback.PaginatedCollection, that you can build a collection from that will not only interface with SlickGrid, but also paginate by adding parameters to the the request to the back end server. Slickback aslo contains a mixin object, Slickback.ScopedModelMixin, that allows you to send arbitrary parameters with the fetch request. The back end can then use these parameters to filter the result. if we start with a Slickback.PaginatedCollection that looks like this:

  var employeesFactory = Slickback.PaginatedCollection.extend({
    model: employee,
    url: '/employees',
  });

Then we can add Slickback.ScopedModelMixin functionality by first mixing it in:

  var employeesFactory = Slickback.PaginatedCollection.extend({
    model: employee,
    url: '/employees',
  }, Slickback.ScopedModelMixin);

However jsut mixing it in will not give us any exposed property where we can specify at run time what filter setting we want. Inorder to do that, an initialize method needs to be in place too:

  var employeesFactory = Slickback.PaginatedCollection.extend({
    initialize: function(){    
    this.extendScope({});
    },
    model: employee,
    url: '/employees',
  }, Slickback.ScopedModelMixin);

extendScope will make an object available at

employees.defaultScope.dataOptions

Instead of {}, extendScope can take an associtive hash-like object too, like {foo:'bar'}

But, now Slickback.PaginatedCollection stopped working, because it wants to run its initialize too, and we just overrode that by writing our own. But help is on the way. From the Backbone.js documentation:

Brief aside on super: JavaScript does not provide a simple way to call super — the function of the same name defined higher on the prototype chain. If you override a core function like set, or save, and you want to invoke the parent object's implementation, you'll have to explicitly call it...

So our final employeesFactory will look like this:

  var employeesFactory = Slickback.PaginatedCollection.extend({
    initialize: function(){    
    this.extendScope({});
    Slickback.PaginatedCollection.prototype.initialize.call(this);
    },
    model: employee,
    url: '/employees',
  }, Slickback.ScopedModelMixin);

Now if we want to add the cgi parameter fab=flum at run time. we do like this:

employees.defaultScope.dataOptions.fab='flum'

Slickback integrates Backbone and SlickGrid, extending Backbone collections to support pagination and filtering ("scoping"), and adapting them to serve as SlickGrid "DataView" objects