A sparse array implementation to use in Ember.js projects.
npm install ember-cli-sparse-arrayAn implementation of [SparseArray]() for Ember.js configured as an addon so that you may use it in any of your EmberCLI projects.
`````
ember install ember-cli-sparse-array
ember g emer-cli-sparse-array
This will create an addon namespace for your application, 'ember-cli-sparse-array'. Available in this namespace is a lib/sparse-array, which gives your code an array definition to work with.
``
import Ember from 'ember';
import SparseArray from 'ember-cli-sparse-array/lib/sparse-array';
export default SparseArray.extend({
// Implement your load callback ;)``
})
You can return the sparse array to a route's model hook (or afterModel or beforeModel depending on your needs) if you wish your route's controller's model to be the content of a lazy-loadable sparse array.
You can use the a route's ...controllerFor('my_route').set('model', mySparseArray); to do your bidding... You just neet do implement the load callback.
When instantiating a SparseArray, you have to supply a load method. The load method is responsible for fetching a subset of the resource, e.g. from your server.
The load method must accept two arguments:
- offset: The 0-based index/offset of the first record to be fetched.limit
- : How many records should be fetched
The load method must return a thenable (i.e. a promise or another object with a .then method on it) that eventually resolves with a hash with two keys:
- total: The total number of records.items
- : An array of maximum limit items that start at offset.
Here is an example:
`javascript
var SparseArray = require('ember-cli-sparse-array/lib/sparse-array');
var comments = SparseArray.create({
load: function(offset, limit) {
return new Em.RSVP.Promise(function(resolve) {
$.getJSON('/comments?offset='+offset+'&limit='+limit).then(function(payload) {
resolve({
total: payload.meta.total,
items: payload.comments
});
});
});
}
});
`
The SparseArray will automatically call your load method when items at not-yet-loaded indexes are being requested by your application.
The length attribute of your SparseArray works just like a normal array. It will start out as 0. It will be set to the value of total each time a promise from load resolves.
load is always called instantly with offset being 0 when you instantiate a SparseArray. This is to find the length property right away.
The SparseArray also has a property called isLoaded, which is false until the first time a load completes, where it will be set to true, and stay true forever.
Calling .objectAt at an index that's greater than or equals to the current length, will always return null.
Example:
``
var comments = SparseArray.create({
load: function(offset, limit) {/ ... /}
});
comments.get('length'); //Will always be 0, since the data hasn't been loaded yet
comments.get('isLoaded'); //false
comments.objectAt(0); //null
comments.objectAt(9999999); //null
//Later, after the first load has completed:
comments.get('length'); //The total value that you resolved the promise with``
comments.get('isLoaded'); //true
comments.objectAt(0); //Whatever you returned at the index 0
After the load method has completed at least once, and the array has a length property, requesting an index less than length, will make the array fetch the items around that index using the load method, if the index has not
been loaded yet.
The {{each}} Handlebars helper is "eager", meaning that it will insert views for _all_ items right away. So when yourtotal
load promise resolves with a value of 9000, it will create 9000 views right away, and request each of the 9000
items from your array. This may result in _a lot_ of requests.
The real power of sparse arrays is when using them together with container views that only requests (i.e. calls
.objectAt) items that is supposed to be in the browser's current viewport. A good example is
Ember.ListView (disclaimer: This sparse array implementation has not been tested
with Ember.ListView yet, but you get the idea).
You can set other options than the load method when instantiating SparseArray. Example:
`javascript`
SparseArray.create({
batchSize: 42,
load: function() {/ ... /}
});
The following options are supported:
- batchSize (integer): The maximum number of records the sparse array will ask the load method to load through the limitlimit
argument. The actual value of may be lower, since the sparse array will only load items that have not already100
been loaded. Defaults to .
- Rejected promises from the load method are currently not handled.objectAt` logic is difficult).
- Short lists (length of 1 or 2) are not the best use of this.
- Lists where the last object is on its own "page" will never load the last page (because the
Fork and PR :)
Above in "Known limitations" is a good place to start picking up issues.