https://github.com/trackableentities/observable-entities-js
Base classes that notify observers when properties are updated and objects are added or removed from collections.
https://github.com/trackableentities/observable-entities-js
angular change-tracking map observables proxies set
Last synced: 7 months ago
JSON representation
Base classes that notify observers when properties are updated and objects are added or removed from collections.
- Host: GitHub
- URL: https://github.com/trackableentities/observable-entities-js
- Owner: TrackableEntities
- License: mit
- Created: 2017-09-12T16:40:37.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-02-28T06:30:39.000Z (over 2 years ago)
- Last Synced: 2025-03-18T10:49:58.905Z (8 months ago)
- Topics: angular, change-tracking, map, observables, proxies, set
- Language: TypeScript
- Homepage: https://trackableentities.github.io/observable-entities-js
- Size: 2.9 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# observable-entities-js
Base classes that notify observers when properties are updated and objects are added or removed from collections.
[](https://travis-ci.org/TrackableEntities/observable-entities-js)
[](https://badge.fury.io/js/observable-entities)
Docs:
Sample application:
> 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:
```js
export class Product extends ObservableEntity {
productId: number;
productName: string;
unitPrice: number;
constructor() {
super();
return super.proxify(this);
}
}
```
`ObservableEntity` as a `modifyListeners` property of type `Subject[]`. 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.
```js
// Trigger binding when item is updated
this.modifyListener = new Subject();
this.modifyListener.subscribe(info => {
this.cd.markForCheck();
});
// Add listener to each product
this.products.forEach(product => {
product.modifyListeners.push(this.modifyListener);
});
```
Similarly, `ObservableSet` and `ObservableMap` have `addListeners` and `removeListeners` properties, and you can add listeners to trigger data binding when items are added or removed.
```js
// Trigger data binding when item is added
this.addListener = new Subject();
this.addListener.subscribe(info => {
this.cd.markForCheck();
});
// Add listener for adds
this.products.addListeners.push(this.addListener);
// Trigger data binding when item is removed
this.removeListener = new Subject();
this.removeListener.subscribe(info => {
this.cd.markForCheck();
});
// Add listener for deletes
this.products.removeListeners.push(this.removeListener);
```