The Observable Collections module provides implementations of JavaScript/ECMAScript 'collection' objects which emit an rxjs observable action stream as they are mutated: Array, Set, Map, WeakSet & WeakMap. Reactive applications which use rxjs may subscribe/observe these actions to synchronise logic with modifications to those collections.
Here is an annotated minimal example showing the usage of an observable Array. You may notice that it uses ECMAScript 2015 syntax. This module is usable in any environment which supports ECMAScript 5+; in practice that's Internet Explorer 9+ and all other modern browsers.
const myArray = ; // Immediately, the initial (empty) state// of the array will be loggedconst subscription = myArrayactions ; // As the item is pushed, a 'push' action// will also be loggedmyArray; // Tidy up after ourselvessubscription;
Full documentation is available on this repository's wiki.
Limitations
In order to provide the range of browser & environment support, this module has to accept two limitations, applicable to observable arrays. Specifically, no observable actions are emitted when either:
- Using brackets notation to set array items by index
- The array is resized via its
length
property
These limitations are covered at length, with information how they may be rectified someday. At present the solution is deemed to be too 'costly' in terms of browser support. For example, it would exclude all versions of Internet Explorer.
Workaround
As a workaround to these limitations, two additional functions are available for observable arrays.
// Sets an item by indexmyArray; // Resizes the arraymyArray;
These functions have the same functionality as the two scenarios described above but also emit the observable action as expected.