backbone-virtualized-listview
Version:
Virtualized list view for Backbone
279 lines (200 loc) • 9.19 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Documentation Index</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.simplex.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">Documentation</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#topNavigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="topNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="ListView.html">ListView</a></li>
</ul>
</li>
<li class="dropdown">
<a href="events.list.html" class="dropdown-toggle" data-toggle="dropdown">Events<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="ListView.html#event:didRedraw">ListView#event:didRedraw</a></li><li><a href="ListView.html#event:willRedraw">ListView#event:willRedraw</a></li>
</ul>
</li>
<li class="dropdown">
<a href="externals.list.html" class="dropdown-toggle" data-toggle="dropdown">Externals<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="external-BinaryIndexedTree.html">BinaryIndexedTree</a></li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" id="search-input">
<div class="input-group-btn">
<button class="btn btn-default" id="search-submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container" id="toc-content">
<div class="row">
<div class="col-md-8">
<div id="main">
<section class="readme-section">
<article><h1><a href="https://github.com/Microsoft/backbone-virtualized-listview">backbone-virtualized-listview</a></h1><p> <a href="https://npmjs.org/package/backbone-virtualized-listview"><img src="https://badge.fury.io/js/backbone-virtualized-listview.svg" alt="NPM version"></a>
<a href="https://travis-ci.org/Microsoft/backbone-virtualized-listview"><img src="https://travis-ci.org/Microsoft/backbone-virtualized-listview.svg?branch=master" alt="Build Status"></a>
<a href="https://david-dm.org/Microsoft/backbone-virtualized-listview"><img src="https://david-dm.org/Microsoft/backbone-virtualized-listview.svg?theme=shields.io" alt="Dependency Status"></a>
<a href="https://coveralls.io/r/Microsoft/backbone-virtualized-listview"><img src="https://coveralls.io/repos/Microsoft/backbone-virtualized-listview/badge.svg" alt="Coverage percentage"></a></p>
<blockquote>
<p>Backbone list view with virtualization support</p>
</blockquote>
<p>UI virtualization is essential to your Web UI performance in case you have
thousands of data item to render. <em>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.</em></p>
<p>The principle is straight forward, but the implementation is fussy. This
<a href="http://backbonejs.org/">Backbone</a> 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.</p>
<h2>Features</h2><h3>Customization</h3><p>The <code>ListView</code> is named as "list view", but it's not necessarily to render a
list. You can customize it into a <code>TABLE</code>, or a sequence of <code>DIV</code>s with the
<code>listTemplate</code> and the <code>itemTemplate</code> options.</p>
<p>Refer to the <a href="https://microsoft.github.io/backbone-virtualized-listview/ListView.html">document</a> for detail</p>
<h3>Scroll to item</h3><p>You can scroll a certain item into the viewport, method <code>scrollToItem</code> is
the helper.</p>
<p>Refer to the <a href="https://microsoft.github.io/backbone-virtualized-listview/ListView.html#scrollToItem__anchor">document</a> for detail.</p>
<h3>Handling data change</h3><p>When data is changed, you can update the view with the <code>set</code> method.</p>
<p>Refer to the <a href="https://microsoft.github.io/backbone-virtualized-listview/ListView.html#set__anchor">document</a> for detail.</p>
<h2>Installation</h2><pre class="prettyprint source lang-bash"><code># install the module
npm install --save backbone-virtualized-listview
# install the peer dependencies
npm install --save jquery underscore backbone fast-binary-indexed-tree</code></pre><h2>Usage</h2><p>Refer to the <a href="https://microsoft.github.io/backbone-virtualized-listview/">document</a> for details.</p>
<pre class="prettyprint source lang-javascript"><code>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);</code></pre><h2>License</h2><p>MIT</p>
<p>This project has adopted the <a href="https://opensource.microsoft.com/codeofconduct/">Microsoft Open Source Code of Conduct</a>.
For more information see the <a href="https://opensource.microsoft.com/codeofconduct/faq/">Code of Conduct FAQ</a>
or contact <a href="mailto:opencode@microsoft.com">opencode@microsoft.com</a> with any additional questions or comments.</p></article>
</section>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-3">
<div id="toc" class="col-md-3 hidden-xs hidden-sm hidden-md"></div>
</div>
</div>
</div>
<div class="modal fade" id="searchResults">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Search results</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<footer>
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</a>
on 2016-08-14T15:57:32+08:00
using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
</span>
</footer>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/toc.js"></script>
<script type="text/javascript" src="scripts/fulltext-search-ui.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$( ".tutorial-section pre, .readme-section pre" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
var langClassMatch = example.parent()[0].className.match(/lang\-(\S+)/);
lang = langClassMatch ? langClassMatch[1] : "javascript";
}
if ( lang ) {
$this
.addClass( "sunlight-highlight-" + lang )
.addClass( "linenums" )
.html( example.html() );
}
} );
Sunlight.highlightAll( {
lineNumbers : false,
showMenu : true,
enableDoclinks : true
} );
$.catchAnchorLinks( {
navbarOffset: 10
} );
$( "#toc" ).toc( {
anchorName : function ( i, heading, prefix ) {
var id = $( heading ).attr( "id" );
return id && id.replace(/\~/g, '-inner-').replace(/\./g, '-static-') || ( prefix + i );
},
selectors : "#toc-content h1,#toc-content h2,#toc-content h3,#toc-content h4",
showAndHide : false,
smoothScrolling: true
} );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( "table" ).each( function () {
var $this = $( this );
$this.addClass('table');
} );
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
<script type="text/javascript">
$(document).ready(function() {
SearcherDisplay.init();
});
</script>
</body>
</html>