backbone-virtualized-listview
Version:
Virtualized list view for Backbone
3,016 lines • 35.3 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Documentation Class: ListView</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">
<h1 class="page-title">Class: ListView</h1>
<section>
<header>
<h2>
ListView
</h2>
<div class="class-description"><p>The virtualized list view class.</p>
<p>In addition to ordinary Backbone View options, the constructor also takes</p>
<p><strong>virtualized</strong>: whether or not the virtualization is enabled.</p>
<p><strong>viewport</strong>: the option locate the scrollable viewport. It can be</p>
<ul>
<li>Omitted, auto detect the closest ancestor of the <code>$el</code> with 'overflowY'
style being 'auto' or 'scroll'. Use the window viewport if found none.</li>
<li>A <code>string</code>, use it as a selector to select an <strong>internal</strong> element as
the viewport.</li>
<li>An <code>HTMLElement</code> or <code>jQuery</code>, use it as the viewport element.</li>
<li>The <code>window</code>, use the window viewport.</li>
</ul></div>
</header>
<article>
<div class="container-overview">
<hr>
<dt>
<h4 class="name" id="ListView"><span class="type-signature"></span>new ListView(options)</h4>
</dt>
<dd>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last"><p>The constructor options.</p>
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>virtualized</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
true
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>viewport</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">HTMLElement</span>
|
<span class="param-type">jQuery</span>
|
<span class="param-type">window</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
</div>
<h3 class="subsection-title">Members</h3>
<dl>
<hr>
<dt class="name" id="defaultItemHeight">
<h4><span class="type-signature"></span>defaultItemHeight<span class="type-signature"> :number</span></h4>
</dt>
<dd>
<div class="description">
<p>The default list item height.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id="indexFirst">
<h4><span class="type-signature"></span>indexFirst<span class="type-signature"> :number</span></h4>
</dt>
<dd>
<div class="description">
<p>The index of the first rendered item.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id="indexLast">
<h4><span class="type-signature"></span>indexLast<span class="type-signature"> :number</span></h4>
</dt>
<dd>
<div class="description">
<p>The index after the last rendered item.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id="itemHeights">
<h4><span class="type-signature"></span>itemHeights<span class="type-signature"> :<a href="external-BinaryIndexedTree.html">external:BinaryIndexedTree</a></span></h4>
</dt>
<dd>
<div class="description">
<p>The BinaryIndexedTree to get the heights and accumulated heights of items.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="external-BinaryIndexedTree.html">external:BinaryIndexedTree</a></span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id="itemTemplate">
<h4><span class="type-signature"></span>itemTemplate<span class="type-signature"> :<a href="ListView.html#~cbItemTemplate">ListView~cbItemTemplate</a></span></h4>
</dt>
<dd>
<div class="description">
<p>The template to render a list item.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="ListView.html#~cbItemTemplate">ListView~cbItemTemplate</a></span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id="length">
<h4><span class="type-signature"></span>length<span class="type-signature"> :number</span></h4>
</dt>
<dd>
<div class="description">
<p>The total count of the items.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">number</span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id="listTemplate">
<h4><span class="type-signature"></span>listTemplate<span class="type-signature"> :<a href="ListView.html#~cbListTemplate">ListView~cbListTemplate</a></span></h4>
</dt>
<dd>
<div class="description">
<p>The template to render the skeleton of the list view.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type"><a href="ListView.html#~cbListTemplate">ListView~cbListTemplate</a></span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id="model">
<h4><span class="type-signature"></span>model<span class="type-signature"> :Object</span></h4>
</dt>
<dd>
<div class="description">
<p>The model object to render the skeleton of the list view.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<hr>
<dt class="name" id="virtualized">
<h4><span class="type-signature"></span>virtualized<span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Whether or not the list view is virtualized</p>
</div>
<dl class="details">
</dl>
</dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<dl>
<hr>
<dt>
<h4 class="name" id="elementAt"><span class="type-signature"></span>elementAt(index)</h4>
</dt>
<dd>
<div class="description">
<p>Get the rendered DOM element at certain index.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>index</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The index of the item.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLElement</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="initialize"><span class="type-signature"></span>initialize()</h4>
</dt>
<dd>
<div class="description">
<p>Backbone view initializer</p>
</div>
<dl class="details">
<dt class="tag-see method-doc-label method-doc-details-label">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="ListView.html">ListView</a></li>
</ul>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="invalidate"><span class="type-signature"></span>invalidate( [callback])</h4>
</dt>
<dd>
<div class="description">
<p>Invalidate the already rendered items and schedule another redraw.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>The callback to notify completion.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="itemAt"><span class="type-signature"></span>itemAt(index)</h4>
</dt>
<dd>
<div class="description">
<p>Get the item at certain index.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>index</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The index of the item.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object</span>
</dd>
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="remove"><span class="type-signature"></span>remove()</h4>
</dt>
<dd>
<div class="description">
<p>Remove the view and unregister the event listeners.</p>
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="render"><span class="type-signature"></span>render( [callback])</h4>
</dt>
<dd>
<div class="description">
<p>Render the list view.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>The callback to notify completion.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="scrollToItem"><span class="type-signature"></span>scrollToItem(index [, position] [, callback])</h4>
</dt>
<dd>
<div class="description">
<p>Scroll to a certain item.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>index</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The index of the item.</p></td>
</tr>
<tr>
<td class="name"><code>position</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
'default'
</td>
<td class="description last"><p>The position of the item.</p>
<p>The valid positions are</p>
<ul>
<li><code>'default'</code>, if the item is above the viewport top, scroll it to the
top, if the item is below the viewport bottom, scroll it to the bottom,
otherwise, keep the viewport unchanged.</li>
<li><code>'top'</code>, scroll the item to top of the viewport.</li>
<li><code>'middle'</code>, scroll the item to the vertical center of the viewport.</li>
<li><code>'bottom'</code>, scroll the item to the bottom of the viewport.</li>
<li><code>{number}</code>, scroll the item to the given offset from the viewport top.</li>
</ul></td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>The callback to notify completion.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="set"><span class="type-signature"></span>set(options [, callback])</h4>
</dt>
<dd>
<div class="description">
<p>Set the list view options. The following options can be set</p>
<p><strong>model</strong>: The model object to render the skeleton of the list view.</p>
<p><strong>listTemplate</strong>: The template to render the skeleton of the list view.</p>
<ul>
<li>By default, it would render a single <code>UL</code>.</li>
<li><strong>Note</strong>: It must contain the following elements with specified class
names as the first and last siblings of the list items. All list items
will be rendered in between.<ul>
<li><code>'top-filler'</code>: The filler block on top.</li>
<li><code>'bottom-filler'</code>: The filler block at bottom.</li>
</ul>
</li>
</ul>
<p><strong>events</strong>: The events hash in form of <code>{ "event selector": callback }</code>.</p>
<ul>
<li>Refer to <a href="http://backbonejs.org/#View-events">Backbone.View~events</a></li>
<li>In addition to the DOM events, it can also handle the <code>'willRedraw'</code> and
<code>'didRedraw'</code> events of the list view.</li>
<li><strong>Note</strong>: The callback <strong>MUST</strong> be a function. Member function names are
not supported.</li>
</ul>
<p><strong>items</strong>: The model objects of the list items.</p>
<p><strong>itemTemplate</strong>: The template to render a list item.</p>
<ul>
<li>By default, it would render a single <code>LI</code> filled with <code>item.text</code>.</li>
<li><strong>Note</strong>: list items <strong>MUST NOT</strong> have outer margins, otherwise the layout
calculation will be inaccurate.</li>
</ul>
<p><strong>defaultItemHeight</strong>: The estimated height of a single item.</p>
<ul>
<li>It's not necessary to be accurate. But the accurater it is, the less the
scroll bar is adjusted overtime.</li>
</ul>
<p>Refer to <a href="ListView.html">ListView</a> for detail.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The new options.</p>
<h6 class="method-params-label method-subparams-label">Properties</h6>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>model</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>listTemplate</code></td>
<td class="type">
<span class="param-type"><a href="ListView.html#~cbListTemplate">ListView~cbListTemplate</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>events</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>items</code></td>
<td class="type">
<span class="param-type">Array.<Object></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
[]
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>itemTemplate</code></td>
<td class="type">
<span class="param-type"><a href="ListView.html#~cbItemTemplate">ListView~cbItemTemplate</a></span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>defaultItemHeight</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="default">
20
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type">function</span>
</td>
<td class="attributes">
<optional><br>
</td>
<td class="description last"><p>The callback to notify completion.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The list view itself.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="ListView.html">ListView</a></span>
</dd>
</dl>
</dd>
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<dl>
<hr>
<dt>
<h4 class="name" id="~cbItemTemplate"><span class="type-signature"></span>cbItemTemplate(item)</h4>
</dt>
<dd>
<div class="description">
<p>The template to render a list item.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>item</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last"><p>The model object of the item</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="~cbListTemplate"><span class="type-signature"></span>cbListTemplate(model)</h4>
</dt>
<dd>
<div class="description">
<p>The template to render the skeleton of the list view.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>model</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last"><p>The model object of the list view.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
</dl>
<h3 class="subsection-title">Events</h3>
<dl>
<hr>
<dt>
<h4 class="name" id="event:didRedraw">didRedraw</h4>
</dt>
<dd>
<div class="description">
<p>The event indicates the list view have completed redraw.</p>
</div>
<dl class="details">
</dl>
</dd>
<hr>
<dt>
<h4 class="name" id="event:willRedraw">willRedraw</h4>
</dt>
<dd>
<div class="description">
<p>The event indicates the list will start redraw.</p>
</div>
<dl class="details">
</dl>
</dd>
</dl>
</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>