foundation-store.store.binding

Home > @genesislcap/foundation-store > Store > binding

Store.binding() method

An api to allow the observation of values and arbitrary bindings outside the template engine.

Signature:

binding<TReturn = any, TParent = any>(token: ((store: this) => TReturn) | keyof this, subscriberChangeCallback?: SubscriberChangeCallback<TReturn> | undefined, isVolatileBinding?: boolean, context?: ExecutionContext): BindingObserver<this, TReturn, TParent>;

Parameters

Parameter	Type	Description
token	((store: this) => TReturn) | keyof this	A store lookup token which can take various forms.
subscriberChangeCallback	SubscriberChangeCallback<TReturn> | undefined	(Optional) SubscriberChangeCallback
isVolatileBinding	boolean	(Optional) Indicates the binding is volatile.
context	ExecutionContext	(Optional)

Returns:

BindingObserver<this, TReturn, TParent>

An rxjs Observable

Example 1

If you bind with a lookup token, TS attains the value type information from the store's interface.

this.store.binding(x => x.ready, value => {...}); // value is a boolean
this.store.binding(x => x.someNumericProp, value => {...}); // value is a number

Example 2

If you use a string token, then you need to provide the value type information.

this.store.binding<boolean>('ready', value => {...}); // value is a boolean
this.store.binding<number>('someNumericProp', value => {...}); // value is a number

Example 3

You can create your own derived bindings that are not already pre-defined as getters on the store's interface.

this.store.binding(x => x.prop1 * x.prop2, value => {...});

Example 4

Such bindings can even be volatile providing you pass true for isVolatileBinding.

this.store.binding(x => x.someToggle ? x.prop1 : x.prop2, value => {...}, true);

Example 5

You can also use the underlying BindingObserver api should you prefer.

this.store.binding(x => x.someData).subscribe({
  handleChange(binding, args) {
    ...
  }
})