ref

ref<T, K>(target, index): ValueRef<T[K]>

Defined in: aberdeen.ts:2280

Creates a reactive reference ({ value: T }-like object) to a specific value within a proxied object or array.

This is primarily used for the bind property in A to create two-way data bindings with form elements, and for passing a reactive property to any of the A key-value pairs.

Reading ref.value accesses the property from the underlying proxy (and subscribes the current scope). Assigning to ref.value updates the property in the underlying proxy (triggering reactive updates).

Type Parameters

T

T extends TargetType

K

K extends string | number | symbol

Parameters

target

T

The reactive proxy (created by proxy) containing the target property.

index

K

The key (for objects) or index (for arrays) of the property to reference.

Returns

ValueRef<T[K]>

A reference object with a value property linked to the specified proxy property.

Example

const $formData = A.proxy({ color: 'orange', velocity: 42 });

// Usage with `bind`
A('input type=text bind=', A.ref($formData, 'color'));

// Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated
A('p text="Selected color: " text=', A.ref($formData, 'color'), 'color:', A.ref($formData, 'color'));

// Changes are actually stored in $formData - this causes logs like `{color: "Blue", velocity 42}`
A(() => console.log($formData))