type="text"
data-action="change->data-binding#update"
data-binding-target="output"
data-binding-property="textContent"
data-binding-value="$source.value"
data-binding-debug="true"
/>

`

All input elements to be bound require at least a data-action calling the
update method, a data-binding-target specifying the target element, and either a data-binding-property to set a property on the target, or a data-binding-attribute to set an attribute.

Optionally data-binding-condition can be passed, to only set the property/attribute if the condition evaluates to true. Also data-binding-value can be passed, to set the value of the target property/attribute.

multiple properties and attributes can be used separated by a space, as well as multiple targets.

Most data attributes (property, attribute, value, and condition) can be set on the target. When set on both the target and the source, target will override the source.

Options

$3

e.g: data-binding-debug="true"

Set this to true to have helpful debug information logged to the console. We strongly recommend having this switched on when setting up your bindings, then set to false or remove when you're happy its working.

$3

e.g: data-binding-target="my-target"

The target element(s) to alter. any element that has a data-binding-ref of this value will match. Multiple elements can match.

$3

e.g: data-binding-property="textContent"

The property(s) of the target element to set.

Security Note: Only safe properties are allowed. Dangerous properties like innerHTML, outerHTML, onclick, src, href, and any property starting with on are automatically blocked to prevent XSS attacks. See the Security section for allowed properties.

$3

e.g: data-binding-attribute="disabled hidden"

The attribute(s) of the target element to set.

Security Note: Only safe attributes are allowed. Dangerous attributes like onclick, onerror, src, href, and any attribute starting with on are automatically blocked to prevent XSS attacks. All data-* attributes are allowed. See the Security section for allowed attributes.

$3

e.g: data-binding-class="text-red-500 line-through"

The classes to be added/removed from the target element.

$3

e.g: data-binding-value="$source.value"

The value to set the target attribute/property to. Note that this field evaluates an expression, this expression has access to $source (the element this is defined on) and $target (the target element).

If you would like to pass in a string, you would have to do this: data-binding-value="'my string'".

If this value is not set, the attribute will be set/removed without a value.

$3

e.g: data-binding-condition="$source.value === 'hello world'"

The condition to check whether or not to set the target attribute/property/class. This evaluates an expression which has access to the value of the source element as $source and the target element as $target.

Expression Syntax

Both data-binding-value and data-binding-condition support JavaScript-like expressions. Here's what's available:

$3

- $source - The source element (the element where the binding is defined)
- $target - The target element (the element that will be modified)

$3

You can access properties and attributes of elements using dot notation:

- $source.value - The value of an input, textarea, or select element
- $source.checked - The checked state of a checkbox or radio input
- $source.dataset.foo - Access data attributes (e.g., data-foo="bar" becomes $source.dataset.foo)
- $target.dataset.id - Access target element's data attributes

$3

- === - Strict equality
- !== - Strict inequality
- > - Greater than
- < - Less than
- >= - Greater than or equal
- <= - Less than or equal

$3

- && - Logical AND
- || - Logical OR
- ! - Logical NOT (negation)

$3

- Strings: Use single or double quotes - 'hello' or "world"
- Numbers: 5, 3.14, -10
- Booleans: true, false
- Null/Undefined: null, undefined

$3

You can use template literals (backticks) in data-binding-value to create dynamic strings:

`html
data-binding-value="Hello ${$source.value}!"
`

$3

Use parentheses to group expressions and control evaluation order:

`html
data-binding-condition="($source.value === 'a' || $source.value === 'b') &&
$source.checked"
`

$3

e.g: data-binding-initial="true"
e.g: data-binding-initial="false"

If this is true data-binding#update will be called on load to set an initial value. Set to false to prevent this behaviour.

$3

e.g: data-binding-event="change input"

You can set one or more events to be triggered when the data-binding-property is changed. This is sometimes required because programmatically assigned values do not trigger events on an element, whereas physically updating the value in the UI does.

- Note events will not be triggered on changes to data-binding-attribute. Only property changes will trigger an event.

Examples

$3

`html
type="text"
data-action="change->data-binding#update"
data-binding-target="foo"
data-binding-property="textContent"
data-binding-value="edited-${$source.value}"
/>


`

$3

`html
type="number"
data-action="change->data-binding#update"
data-binding-target="foo"
data-binding-condition="$source.value > 5"
data-binding-attribute="data-large"
/>





`

$3

`html
type="checkbox"
data-action="change->data-binding#update"
data-binding-target="foo"
data-binding-condition="$source.checked"
data-binding-class="badger bodger"
/>





`

$3

`html
type="checkbox"
data-action="change->data-binding#update"
data-binding-target="foo"
data-binding-condition="!$source.checked"
data-binding-attribute="disabled hidden"
/>





`

$3

`html
type="checkbox"
data-action="change->data-binding#update"
data-binding-target="foo"
/>

data-binding-ref="foo"
data-binding-condition="!$source.checked"
data-binding-attribute="disabled"
>
I will be disabled when checked