Backgrid aims to be a highly modular and flexible library that aims to provide you with a set of basic building blocks for creating all kinds of data grids.
Architecture
Backgrid is primarily comprised of a set of highly reusable Backbone.View subclasses and a number of internal models and helper classes. In practical terms, this architecture ensures that if you are already familiar with Backbone, you can carry that knowledge over and apply to Backgrid directly.
Laying out Components
Backgrid's View components are, borrowing from Marionette's parlance, primarily CollectionView and ItemView components, which means the components are to be layed out sequentially. However, the Grid's root element itself can be inserted to any where in the DOM.
Event Handling
Another notable architectural choice Backgrid has made involves how it handles events. Backgrid takes advantage of the fact that every Backbone class implements the Backbone.Events interface. Internally, every Backgrid object shares one or more of Columns, Column, Collection and Model, Backgrid simply treats them as "event buses" to enable cross-component communication without requiring every Backgrid component to know of the existence and implementation of each other.
Since all Model events will bubble up to the collection, interested components can simply treat the Columns and Collection instances as "event queues" and "subscribe" to the Backgrid events. All Backgrid events are effectively notifications of state changes, any objects that mixes in Backbone.Events can react to these state changes. You can find a list of relevant events in this document.
Customization
If you are coming from a jQuery background, you'd notice that most of the jQuery plugins, no matter how "good" that are, for some measure of "goodness", are extremely difficult to customize. Most jQuery plugins with a modicum of complexity will give you at least dozens of options. The general rule of thumb is, if it doesn't work the way you want it, ask the author to throw more options at the problem. Failing that, spend an inordinate amount of time to source for another similar plugin. If all else failed, you have to roll your own plugin.
Your laziness has backfired, but that doesn't have to be the case.
The inherant problem with the jQuery plugin model is that it doesn't offer you any help other than giving you a namespace, and the combined laziness of plugin authors and users have created an ecosystem full of opaque plugins that produce DOM structures that are hard to comprehend, hard to style and behaviors impossible to alter, no matter how trivial they should be.
Backgrid offers 3 levels of customization:
- Options to the Grid constructor - Used for required parameters and generic behavior provide by Backgrid that you want to switch on or off.
-
Styling via CSS - Backgrid's generated DOM structure consists
solely of your plain old
<table>HTML elements, just style them as such. - Inheritance - Subclass a Backgrid component, give it your preferred behavior, give the new class to the Grid constructor and voila.
Go on to the Core API reference to find out more: