backbone-virtualized-listview

Backbone list view with virtualization support

UI virtualization is essential to your Web UI performance in case you have thousands of data item to render. The idea is to skip rendering the off screen items and replace them with filler blocks. You need to handle the scroll and resize events to adjust the DOM content.

The principle is straight forward, but the implementation is fussy. This Backbone based implementation is aiming to create a general purposed virtualized view with high quality and performance, so that people can focus more on the user experience instead of the complexity of virtualization.

Features

Customization

The ListView is named as "list view", but it's not necessarily to render a list. You can customize it into a TABLE, or a sequence of DIVs with the listTemplate and the itemTemplate options.

Refer to the document for detail

Scroll to item

You can scroll a certain item into the viewport, method scrollToItem is the helper.

Refer to the document for detail.

Handling data change

When data is changed, you can update the view with the set method.

Refer to the document for detail.

Installation

# install the module 
npm install --save backbone-virtualized-listview
# install the peer dependencies 
npm install --save jquery underscore backbone fast-binary-indexed-tree

Usage

Refer to the document for details.

import _ from 'underscore';
import ListView from 'backbone-virtualized-listview';
import listTemplate from 'my-list-template.jade';
import itemTemplate from 'my-item-template.jade';
 
const listView = new ListView({
  el: '.container',
}).set({
  items: _.map(_.range(2000), i => { text: i }),
  listTemplate,
  itemTemplate,
});
listView.render();
 
// Scroll to item
listView.scrollToItem(100);

License

MIT

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.