Invisible pagination (virtual list, collection-repeat)

[simplesmiler]

A directive that is like v-for, but keeps only would-be-seen items in the DOM to improve performance.

One way to achieve it is to wrap items into a container, set container to position: relative;, set items to position: absolute; and calculate item positions. This is how collection-repeat works.

Another way is to replace offscreen elements with empty placeholders of appropriate height. This is how infinity works.

References:

• http://ionicframework.com/docs/api/directive/collectionRepeat/
  • http://blog.ionic.io/collection-repeat/
  • http://blog.ionic.io/collection-repeat-iteration-two/
  • http://loring-dodge.azurewebsites.net/re-creating-collection-repeat-an-improved-ng-repeat-for-large-sets/
• http://airbnb.io/infinity/
• https://github.com/developerdizzle/react-virtual-list

[simplesmiler]

Possible solution: https://github.com/paulpflug/vue-clusterize

[paulpflug]

first working version released 😄

there are probably some bugs since I have no unit tests yet, though.

[simplesmiler]

There is also vue-list-view by @CatchLabs, that uses the same approach that ionic collection-repeat does: position: relative on the container, position: absolute on the items and reuse elements instead of destroying/creating them.

[simplesmiler]

There is also react-virtualized, which looks great.

[simplesmiler]

With 2.0 knocking on the door, the only way to implement this is a higher order component.

Reference: vuejs/vue#3319 (comment)