A reference object with a value property linked to the specified proxy property.
const formData = proxy({ color: 'orange', velocity: 42 });
// Usage with `bind`
$('input', {
type: 'text',
// Creates a two-way binding between the input's value and formData.username
bind: ref(formData, 'color')
});
// Usage as a dynamic property, causes a TextNode with just the name to be created and live-updated
$('p:Selected color: ', {
text: ref(formData, 'color'),
$color: ref(formData, 'color')
});
// Changes are actually stored in formData - this causes logs like `{color: "Blue", velocity 42}`
$(() => console.log(formData))
Creates a reactive reference (
{ value: T }-like object) to a specific value within a proxied object or array.This is primarily used for the
bindproperty in $ to create two-way data bindings with form elements, and for passing a reactive property to any of the $ key-value pairs.Reading
ref.valueaccesses the property from the underlying proxy (and subscribes the current scope). Assigning toref.valueupdates the property in the underlying proxy (triggering reactive updates).