List Controller

A powerful Backbone.js library that renders a collection of models as a list with infinite scrolling, sorting, filtering, and search field.

Tips:• Apply a filter (color or location), then change that filter but hold cmd/ctrl when you do.
• Click on the "count" button to reveal "bulk actions"
• Try searching for name or email.
• Then try typing "loc:" proceeded by a location name. Ex: "loc:oregon".

Overview

In any application dealing with a significant amount of data, displaying a list of data will be necessary. This could be for reporting, work progress, or data review. Whatever the use case, List Controller lessens the burden of generating these list.

List Controller improves DOM responsiveness by lazy loading the rows with infinite scrolling. The library also provides common list actions: sorting, filtering, and bulk actions. Filters are stored in local storage so that the application remembers the last selected filter set. In addition, multiple filters can be saved as a "preset" for quickly using later.

This library has been 3+ years in the making here at Blackstone Audio. It is used everyday in dozens of areas inside our ERP application and is constantly being improved.

Assuming your collection has some data in it, the code above is all you need to render an infinite scrolling list. See demo-2.js

Preparing for other features

Before adding sorts, filters, and other options, it is best to specify the following options on your SortableCollection for things to work right.

key

This is the key used to save selected sorts and filters to local storage. You want this unique so as not to conflict with other ListControllers you may use other places.

defaultSort

How should the collection be sorted upon first loaded?

defaultDescoptional

Should the sort start in descending order?

dbSortoptional

Is the sorting done clientside in the browser, or should the server do the sorting instead? If this is set to true, the collection will be refetched when sort changes to allow the server to return the new sorted data.

Filter settings

labeloptional: string

The label for the filter will made from the key using _.humanize(). For example, if the key is "filter-1", it will become "Filter 1". If you do not like this default naming convention, you can specify the label to be something else.

prefixoptional: string

When a filter value is selected, the value's label will be displayed. Sometimes the value itself conflicts with other filter values. For example, maybe multiple filter keys have a "Many" filter value. It would be confusing the see multiple filters that say "Many" with no other context. Setting a prefix to something like "Filter 1: " will make the selected filter display as "Filter 1: Many".

valueshash / hash

This is the core of each filter. It's structure is the same as Dropdown.js. It accepts a hash or a function returning a hash.

filterByoptional: string preset / function

When a filter is selected, this is the method that is used to filter the data. There are presets created that can be reviewed under _defaultFilterMethods in ListController.Settings.js

By default, the text preset is used which attempts to compare the filter value on the model itself using a method or attribute of the same name:model[filterVal].call() || model.get(filterVal)

Other presets include: number, int, array, and model_id.

Or you can use a function for your own logic:function(model, filterVal, filterKey){}

multioptional: bool

If set to true, multiple values can be selected by holding "cmd/ctrl". It's important to note that this means the filterVal in filterBywill be an array, not a string.

defaultValIndexoptional: int

When the filters are "cleared", they go back to the default filter value which is the first (0) filter. This is generally fine most of the time, but if you wish for a different value other than the first to be the default, set the defaultValIndex