Base classes that notify observers when properties are updated and objects are added or removed from collections.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
src
tools
.editorconfig
.gitignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json
rollup.config.js
tsconfig.json
tslint.json
yarn.lock

README.md

observable-entities-js

Base classes that notify observers when properties are updated and objects are added or removed from collections.

Build Status npm version

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:

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<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 updated
this.modifyListener = new Subject<INotifyInfo>();
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.

// Trigger data binding when item is added
this.addListener = new Subject<INotifyInfo>();
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<INotifyInfo>();
this.removeListener.subscribe(info => {
  this.cd.markForCheck();
});

// Add listener for deletes
this.products.removeListeners.push(this.removeListener);