observable-entities-js
Base classes that notify observers when properties are updated and objects are added or removed from collections.
Docs: https://trackableentities.github.io/observable-entities-js
Sample application: https://github.com/TrackableEntities/observable-entities-js-sample
Note: You must change the TypeScript compiler target to "es2015" in ts.config.json.
- Apps using observable-entities can support most modern browsers (Chrome, Firefox, Safari, Edge, etc), but they will not be able to support legacy browsers (Internet Explorer).
Setup
Install observable-entities as a runtime dependency from npm.
npm i --save observable-entities
Usage
To observe property changes on an object, create a class that extends ObservableEntity
. Then add a constructor
that returns super.proxify(this)
. For example:
productId: number; productName: string; unitPrice: number; { super; return super; }
ObservableEntity
as a modifyListeners
property of type Subject<INotifyInfo>[]
. To listen for property changes, add a listener can call subscribe
on it. For example, an Angular component can perform observable-based data binding with an OnPush
strategy.
// Trigger binding when item is updatedthismodifyListener = <INotifyInfo>;thismodifyListener; // Add listener to each productthisproducts;
Similarly, ObservableSet
and ObservableMap
have addListeners
and removeListeners
properties, and you can add listeners to trigger data binding when items are added or removed.
// Trigger data binding when item is addedthisaddListener = <INotifyInfo>;thisaddListener; // Add listener for addsthisproductsaddListeners; // Trigger data binding when item is removedthisremoveListener = <INotifyInfo>;thisremoveListener; // Add listener for deletesthisproductsremoveListeners;