Options
All
  • Public
  • Public/Protected
  • All
Menu

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);

Index

Legend

  • Module
  • Object literal
  • Variable
  • Function
  • Function with type parameter
  • Index signature
  • Type alias
  • Enumeration
  • Enumeration member
  • Property
  • Method
  • Interface
  • Interface with type parameter
  • Constructor
  • Property
  • Method
  • Index signature
  • Class
  • Class with type parameter
  • Constructor
  • Property
  • Method
  • Accessor
  • Index signature
  • Inherited constructor
  • Inherited property
  • Inherited method
  • Inherited accessor
  • Protected property
  • Protected method
  • Protected accessor
  • Private property
  • Private method
  • Private accessor
  • Static property
  • Static method

Generated using TypeDoc