0.6.3 • Published 5 years ago

virtual-each v0.6.3

Weekly downloads
1,596
License
MIT
Repository
github
Last release
5 years ago

virtual-each

Ember Observer Score Ember badge NPM Version Build Status Dependency Status devDependency Status

A direct port of react-infinite-list to Ember. This was created as a benchmark exercise.

This component will only ever render DOM nodes for what can fill the view port. Using the power of Glimmer, it will reuse the DOM nodes it's already created and swap out the content as the user scrolls.

If you want a more flexible virtualization component, please try ember-collection.

Install

ember install virtual-each

Usage

{{#virtual-each items
  height=200
  itemHeight=36
  onScrollBottomed=(action 'handlePageBottom')
  positionIndex=0
  as |item actualIndex virtualIndex|
}}
  <div class="person-row">
    <img src={{item.picture}} />
    <div>
      <div>{{actualIndex}}. {{item.name.last}}, {{item.name.first}}</div>
      <div class="company">{{item.company}}</div>
    </div>
  </div>
{{else}}
  <strong>No results</strong>
{{/virtual-each}}

Attributes

  • height: fixed height of the component (required)
  • itemHeight: fixed row height (required)
  • onScrollBottomed: invoked when scrolled to the bottom of the list (optional)
  • positionIndex: start at or scroll to a specific item based on the item index (optional)

CSS

Add the following CSS snippet to styles/app.css:

.virtual-each {
  overflow-y: auto;
}

.infinite-list-content {
  list-style: none;
  margin: 0;
  padding: 0;
}

Known "Gotchas"

  • Not defining an itemHeight, or defining a less-than expected height, will result in unexpected jumping behavior during scrolling. itemHeight should be set to exact height of a row.

Demo

npm.io

Requirements

  • Ember >= 2.12.0

Contributing

Install

Running Tests

  • ember test
  • ember test --server
0.6.3

5 years ago

0.6.2

6 years ago

0.6.0

7 years ago

0.5.1

8 years ago

0.5.0

8 years ago

0.4.0

8 years ago

0.3.1

8 years ago

0.3.0

8 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.0

9 years ago

0.0.14

9 years ago

0.0.13

9 years ago

0.0.12

9 years ago

0.0.11

9 years ago

0.0.10

9 years ago

0.0.9

9 years ago

0.0.8

9 years ago

0.0.7

9 years ago

0.0.6

9 years ago

0.0.5

9 years ago

0.0.4

9 years ago

0.0.3

9 years ago

0.0.2

9 years ago

0.0.1

9 years ago