mrinterweb / ember-collection

Ember Collection

An efficient incremental rendering component with support for custom layouts and large lists.

Table of Contents

1. Installation
2. Usage
3. Subclassing
4. Build it
5. How it works
6. Run unit tests
7. Caveats

Installation

TODO - Need to publish addon.

• ember install ember-collection

Demo

TODO - Create twiddles with examples. Needs the addon to be published first?

Submitting bugs

TODO - Create a base ember twiddle with EmberCollection setup.

It would help us greatly to help you and to improve ember collection.

Usage

The height of the collection is inferred from its nearest relative parent. This is so you can just use CSS to style the container.

So, first make sure the collection has a parent with position: relative, and then render a template:

{{#ember-collection
  items=model
  cell-layout=(fixed-grid-layout 800 50) as |item index|
}}
  {{item.name}}
{{/ember-collection}}

Next, let's feed our template with some data:

// define index route and return some data from model
export default Ember.Route.extend({
  model: function() {
    var items = [];
    for (var i = 0; i < 10000; i++) {
      items.push({name: "Item " + i});
    }
    return items;
  }
});

Shazam! You should be able to see a scrollable area with 10,000 items in it.

Estimating width/height

You can pass estimated-width and estimated-height to the collection, for situations where the collection cannot infer its height from its parent (e.g., when there's no DOM in FastBoot).

Once the collection has been rendered, estimated-width and estimated-height have no effect.

Subclassing

TODO - Example of extending the component and providing a new layout.

Controlling the grid

TODO - Talk about how the width, height and cell-layout properties will change the layout.

Required parameters

You must specify the height, width and cell-layout parameters because EmberCollection will try to fill visible area with items.

Build It

1. git clone https://github.com/emberjs/ember-collection.git
2. cd ember-collection
3. npm install (implicitly runs bower install as a postinstall)
4. ember build

How it works

EmberCollection 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 for more information.

Running unit tests

npm install
npm test

Thanks

A lot of the work was sponsored by Yapp Labs, and some work was sponsored by Tightrope Media Systems.