Observable arrays with live data binding, callbacks for data transformation, and callbacks for any modification
Observable arrays with live data binding, callbacks for data transformation, and callbacks for any modification.
This library depends on
npm install live-arrays
live-arrays has no dependencies so you just need to pop it in wherever you need it. In the browser the functions will be added to the window, while in node they are exported as a module.
// nodevar BoundArray = require'live-arrays'BoundArrayArrayView = require'live-arrays'ArrayViewsubarray = require'live-arrays'subarray;//browser<script src="live-arrays.js"></script>
subarray(input, start, end) Works the same as array buffer subarray, except for any indexed object. This will be a live view of the underlying input array. It will inherit from the same prototype and look mostly the same. It will have its own properties aside from the indexed ones. And is a separate object, but its indexed properties will read and write to the given input.
Functions as a normal array but with callbacks when changed and optionally when resized. onchange and onresize can set during construction and are also properties on the array that can be changed.
var list = documentbodyappendChilddocumentcreateElement'ul';var bound = ;listchildrenindextextContent = value;;if size > oldSizefor var i = oldSize; i < size; i++listappendChilddocumentcreateElement'li';elsefor var i = oldSize; i > size; i--listremoveChildlistchildreni - 1;;
ArrayView(inputArray, transformer, untransformer)__
Take an existing indexed object and create a transformed view of it. The ArrayView will have the same length but items are run through your transform call back before being returned. This a live view of the input array. Whenever a property is accessed it will be based on whatever is in the first array at the time. Length changes will be reflected as well.
The optional untransformer changes the array from readonly to changeable. Whenever a modification is done to your ArrayView, you must translate it back to the value that should go into the original array.
var list = documentbodyappendChilddocumentcreateElement'ul';var view =input: listchildrenreturn itemtextContent;if index >= listchildrenlengthfor var i = listchildrenlength; i <= index; i++listappendChilddocumentcreateElement'li';else if value === undefinedlistremoveChildlistchildrenindex;return listchildrenindextextContent = value;;viewpushapplyview Objectkeyswindow;