backbone-list-controller
v1.0.0
Published
A powerful Backbone.js class that renders a collection of models as a list with infinite scrolling, sorting, filtering, and search field.
Downloads
76
Maintainers
Readme
List Controller
A powerful Backbone.js class that renders a collection of models as a list with infinite scrolling, sorting, filtering, and search field.
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.
List Controller relies heavliy on Dropdown.js for the list actions (sort, filter, and bulk actions).
Demo & Documentation
Check out the demo and documentation to see the List Controller in action.
Basic Use
To use List Controller, you at least need these three things:
1) Collection
var Coll = SortableCollection.extend({})
2) List View (view for each row)
var ListView = Backbone.View.extend({
tagName: 'li',
className: 'row',
render: function(){
this.$el.html(this.model.get('label'))
return this;
}
})
3) List Controller
var Controller = ListController.extend({
el: '#demo',
listView: ListView,
// tell infinite scroll to load more when reaching the end of this list
scrollContext: '#demo .list',
initialize: function(){
var fakeData = [], i=0;
while(i++<60){ fakeData.push({id: i, label: 'Row '+i})}
this.collection = new Coll(fakeData);
}
})
var listController = new Controller();
// later... render the controller
listController.render();