knockout.list

[![Build Status](https://travis-ci.org/sunesimonsen/knockout.list.png?branch=master)](https://travis-ci.org/sunesimonsen/knockout.list)

npm install knockout.list
30 downloads in the last month

knockout.list

Build Status

A list binding capable of scrolling through up to 500 thousand items, by only loading data for the viewport.

Note: This project is still in an early stage, so please use at own discretion.

Click here to see an example

Usage

data-bind="list: <observableArray>"

data-bind="list: {data: <observableArray>}"

data-bind="list: {data: <observableArray>, visibleIndex: <observable>, dividers: <observable>, visibleDivider: <observable>, grid: <boolean>, scrollable: <string>}"

Options

data \

A required observable array that contains all items available to the list binding.

visibleIndex \

An observable pointing to the index in data which should be visible. When updating this observable's value, knockout.list will try to scroll the requested index into view.

dividers \ or data.dividers \

An observable containing an object. The object keys specify before which data index a particular divider should be placed, the values which text to show in the divider.

visibleDivider \

An observable pointing to the object key in dividers of which divider should be visible. When updating this observable's value, knockout.list will try to scroll the requested index into view.

Requires dividers option to be set.

grid \

When false (default), tiles are placed below each other. All tiles are assumed to have equal height.

When true, knockout.list tries to position multiple tiles side-by-side. All tiles are assumed to have equal height and width.

Click here to see an example

scrollable \

By default, knockout.list assumes that the element it is bound to, is scrollable.

If scrolling should take place in a parent of the bound element, this should be done by providing a valid CSS selector here.

Click here to see an example

Browser support

This binding uses native scrolling of the browser, by creating a stretcher element which stretches the list, to show a scrollbar large enough to scroll to any element in the list.

This means that the maximum number of items the list can contain is limited by the maximum height of an element the different browsers allow.

Maximum element height in different browsers:

  • Chrome: 33555000px
  • IE 9/10: 1534000px
  • Firefox: 8949000px

Contributors

  • Maarten Winter (@mwoc)
npm loves you