Sprites.Object
Reactive helpers over objects. Field is a two way view of one field; With copies a container with one field replaced; At reads a field by a reactive key. Every argument may be a constant or a reactive value. To build a two way object from a mixed literal, use Sprites.Reactive.Object, the one object constructor.
Sprites.Object.Field Sprites.Reactive.Value
Sprites.Object.Field(source, key)
A two way view of one field of an object. Read, it is that field; set, it writes the whole object back with the field replaced, so an edit to the field flows to the source. It is the object namespace's entry to the core lens Sprites.Reactive.Field.
| Input | Type | Description |
|---|---|---|
source | Object or Sprites.Reactive.Value | The object to view a field of. |
key | String or Number | The field name or array index to view. |
Returns a two-way Sprites.Reactive.Value over the one field.
const point = Sprites.Reactive.Value({ x: 4, y: 9 });
const x = Sprites.Object.Field(point, 'x');
Sprites.Ui.Input.Number(x, 0, 20);
const y = Sprites.Object.Field(point, 'y');
Sprites.Ui.Dom.Text(' point = ', x, ', ', y);Sprites.Object.With Sprites.Reactive.Value
Sprites.Object.With(container, key, value)
A shallow copy of a container with one field or element set to a value, leaving every other reference the same. The container may be an object or an array. When the field already holds the value the container is returned as it is.
Each argument may be a constant or a reactive value, so the copy follows them.
| Input | Type | Description |
|---|---|---|
container | Object, Array or Sprites.Reactive.Value | The container to copy. |
key | String, Number or Sprites.Reactive.Value | The field or index to set. |
value | Any or Sprites.Reactive.Value | The value to set at the key. |
Returns a read-only Sprites.Reactive.Value holding the updated copy.
const point = Sprites.Reactive.Value({ x: 1, y: 2 });
const y = Sprites.Reactive.Value(2);
const moved = Sprites.Object.With(point, 'y', y);
Sprites.Ui.Input.Number(y, 0, 9);
const mx = Sprites.Object.Field(moved, 'x');
const my = Sprites.Object.Field(moved, 'y');
Sprites.Ui.Dom.Text(' moved = ', mx, ', ', my);Sprites.Object.At Sprites.Reactive.Value
Sprites.Object.At(source, key)
A read only view of one field of a container by a key that may itself be reactive: the value at that key, or undefined when the container is missing it. Unlike Field, whose key is fixed, this reads the key reactively, so a lookup follows a changing key; and it is one way, a dynamic read rather than a two way field. Pair it with Sprites.Array.KeyBy to read a records lookup by a reactive id.
| Input | Type | Description |
|---|---|---|
source | Object or Sprites.Reactive.Value | The container to read from. |
key | String, Number or Sprites.Reactive.Value | The key to read, itself reactive or constant. |
Returns a read-only Sprites.Reactive.Value holding the value at the key.
const table = Sprites.Reactive.Value({ red: '#e6194b', green: '#3cb44b' });
const key = Sprites.Reactive.Value('green');
const colour = Sprites.Object.At(table, key);
Sprites.Ui.Input.Dropdown(key, () => {
Sprites.Ui.Input.Option('red', 'red');
Sprites.Ui.Input.Option('green', 'green');
});
Sprites.Ui.Dom.Text(' → ', colour);