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.
data-bind="list: <observableArray>"
data-bind="list: {data: <observableArray>}"
data-bind="list: {data: <observableArray>, visibleIndex: <observable>, dividers: <observable>, visibleDivider: <observable>, grid: <boolean>, scrollable: <string>}"
A required observable array that contains all items available to the list binding.
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.
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.
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.
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.
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.
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
- Maarten Winter (@mwoc)