js-list-container

#List Container

An evented array list container that augments the standard javascript array without altering the array prototype. Events fire when the array changes or when a contained value or model changes.

Overview

A simple wrapper/container for array lists that provides a base class to extend without modifying the javascript Array prototype.

Installation

npm install js-list-container --save

API

Instance Methods

• push/pop
• shift/unshift
• forEach
• forEachIndex - iterator with index
• size
• clear
• getList / setList
• sort
• setSorter
• updateModel - will trigger data model change event
• stringify

Instance Attributes

• lastRefresh
• lastChangeDate - updated by container with push/pop/etc

Class Methods

• extend
• parse

Events

• onListChange - whenever the list size changes
• onDataChange - when a contained object changed through updateModel()

Use

Simple use without extension...

const ListContainer = require('js-list-container');
const options = {
	list:require('./list.json'),
	lastRefresh:new Date()
};
	
const container = new ListContainer( options );
container.size() === options.list.length;
	
container.forEach(item => {
	console.log( item );
});

Simple extension use case...

const MyCollection = function(options) {
	const container = this;
	
	ListContainer.extend( this, options );
	
	this.getItem = function(index) {
		var list = container.getList();
		
		return list[ index ];
	};
};

const collection = new MyCollection( opts );
	
collection.push( { id:1, created:new Date() } );
collection.push( { id:2, created:new Date() } );
	
collection.size() === 2;
	
let item = collection.getItem( 1 );
item.id === 2;	

Evented Example

const dash = require('lodash');
const ListContainer = require('js-list-container');
const options = {
	list:require('./list.json'),
	lastRefresh:new Date()
};
	
const container = new ListContainer( options );
container.onListChange(function() {
    console.log( 'list changed: ', container.lastChangeDate );
});

container.onDataChange(function(oldValue, newValue) {
	console.log( 'data changed: ', container.lastChangeDate );
});

// copy of one of the contained models
let originalModel = container.getList()[ 3 ],
	changeModel = dash.clone( original );

changeModel.title = 'My New Title';

// do the change will file a data change event and return true
container.updateModel( originalModel, changeModel ) === true;

// this will fire a list change event
let popped = container.pop();

// this will also fire a list change event
container.clear();

// this will not fire a data change event
container.updateModel( originalModel, changeModel ) === false;

Tests

All objects are tested using gulp and mocha. You can run tests by doing this:

	make test

    // or
    
    make watch
    
    // or

    make test

    // or

    npm test

copyright © 2014-2016 rain city software | version 0.91.22