<commit_before># Ember.ListView

An efficient incremental rendering list view for large lists.


## Demo

[Demo on JSBin](http://jsbin.com/igawaq/23/)


## Usage

### Template

```
{{#collection Ember.ListView contentBinding="controller" height=500 rowHeight=50}}
	<!-- row content here -->
{{/collection}}
```

### Subclassing

```
App.ListView = Ember.ListView.extend({
	height: 500,
	rowHeight: 50
});
```

You can customize the row views by subclassing `Ember.ListItemView` and specifying the `itemViewClass` property in the `Ember.ListView` definition.

### Required CSS

```
.ember-list-view {
  overflow: auto;
  position: relative;
}
.ember-list-item-view {
  position: absolute;
}
```

## How it works

`Ember.ListView` will create enough rows to fill the visible area (as defined by the `height` property). It reacts to scroll events and reuses/repositions the rows as scrolled.

Please look at the [unit tests](https://github.com/emberjs/list-view/blob/master/packages/list-view/tests/list_view_test.js) for more information.

## Running unit tests

Run ```bundle exec rackup``` and open [http://localhost:9292](http://localhost:9292) in a browser.<commit_msg>Add Building Ember.ListView instructions<commit_after># Ember.ListView

An efficient incremental rendering list view for large lists.


## Demo

[Demo on JSBin](http://jsbin.com/igawaq/23/)

## Usage

### Template

```
{{#collection Ember.ListView contentBinding="controller" height=500 rowHeight=50}}
	<!-- row content here -->
{{/collection}}
```

### Subclassing

```
App.ListView = Ember.ListView.extend({
	height: 500,
	rowHeight: 50
});
```

You can customize the row views by subclassing `Ember.ListItemView` and specifying the `itemViewClass` property in the `Ember.ListView` definition.

### Required CSS

```
.ember-list-view {
  overflow: auto;
  position: relative;
}
.ember-list-item-view {
  position: absolute;
}
```

## How it works

`Ember.ListView` will create enough rows to fill the visible area (as defined by the `height` property). It reacts to scroll events and reuses/repositions the rows as scrolled.

Please look at the [unit tests](https://github.com/emberjs/list-view/blob/master/packages/list-view/tests/list_view_test.js) for more information.

## Building Ember.ListView

1. Run `bundle install` to fetch the necessary ruby gems.
2. Run `rake dist` to build Ember.ListView. `list-view.js` will be
placed in the `dist/modules` directory.
 
## Running unit tests

Run ```bundle exec rackup``` and open [http://localhost:9292](http://localhost:9292) in a browser.
{'fraction_non_alphanumeric': 0.13460788138899726, 'fraction_numerical': 0.016387046429964885, 'mean_word_length': 4.490364025695931, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7400942', 'n_tokens_mistral': 853, 'n_tokens_neox': 778, 'n_words': 255}