0.6.3 • Published 5 years ago
virtual-each v0.6.3
virtual-each
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
Requirements
- Ember >= 2.12.0
Contributing
Install
git clone
this repositorynpm install
bower install
ember server
- Visit your app at http://localhost:4200.
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