@ramstack/alpinegear-bound 
@ramstack/alpinegear-bound is a plugin for Alpine.js that provides the x-bound directive.
This directive allows for two-way binding between input elements and their associated data properties.Svelte Alpine.js data properties.
> [!Note]@ramstack/alpinegear-main
Installation
$3 To include the CDN version of this plugin, add the following
`
$3 npm
:
`
bash`
Then initialize it in your bundle:
`
jsAlpine.plugin(bound);
`
Usage The syntax for binding properties is
x-bound:property="dataprop"
.Let's take the following example:
`
html`
Live demo | Alpine.js x-bound: Basic usage In this example, we bind the
name
property to the value
property of the element.x-bound
provides two-way binding, any changes to name
will be reflected in the element,button
is clicked.
$3 x-bound
directive also supports shorthand syntax: &
.So the previous example could be written as follows:
`
html`
If the element's property name matches the bound data property, you can simplify this further:
`
html`
In this example, the repetition of the
value
in x-bound:value="value"
is redundant,. Since we can use &
instead of x-bound
,
`
html`
More examples:
`
html
`
Live demo | Alpine.js x-bound: Shorthand Syntax
$3 For
elements with type="number"
and type="range"
, values are automatically coerced into numbers. value is empty or invalid, the bound property will be set to null
.
`
html`
Live demo | Alpine.js x-bound: Bind Numeric Inputs
$3 For
elements with type="file"
, the binding is applied to the files
property,FileList object being assigned,
`
html`
Live demo | Alpine.js x-bound: Bind Files
$3 To bind the value of a
element, use the value property:`html Select... Apple Banana Orange Grape Mango
`Live demo | Alpine.js x-bound: Binding select
element, the data property is an array containing the values of the selected options.
`html Cat Goldfish Parrot Spider Pets:
`Live demo | Alpine.js x-bound: Multiple select
$3 The directive also allows binding to the
property of elements:
`html Details Something small enough to escape casual notice.
`Live demo | Alpine.js x-bound: Binding details
$3 You can bind the
and naturalHeight properties of an image after it loads:
`html`Live demo | Alpine.js x-bound: Binding image sizes > [!TIP]
for multi-word properties like naturalWidth, you can write it as natural-width. It will be automatically normalized internally:`html`> [!NOTE]
html`
and naturalHeight properties are read-only and reflect the original image dimensions, available after the image has loaded.
$3 You can bind the
videoWidth and videoHeight properties of a video after it loads:
`html`Live demo | Alpine.js x-bound: Binding video sizes
$3 For
elements, you can bind the following properties:innerHTML innerText textContent
`html
`Live demo | Alpine.js x-bound: Contenteditable bindings
$3 You can bind to the following properties to get the width and height of block-level elements,
. The values will update whenever the element's size changes:- clientHeight clientWidth offsetHeight offsetWidth
`html
`Live demo | Alpine.js x-bound: Binding element dimensions > [!NOTE]
> [!IMPORTANT]
don't have an explicit width or height (unless they are intrinsically sized, like or ). Therefore, a ResizeObserver cannot track their size. If you need to observe their size, change their display style to something like inline-block.ResizeObserver updates.
$3 elements that should function together can utilize the group bound property.
`html`Live demo | Alpine.js x-bound: Binding group inputs
$3 directive supports binding the indeterminate property of elements,
`html`Live demo | Alpine.js x-bound: Binding indeterminate This is useful for scenarios like selecting a subset of items in a list, such as in a table header checkbox:
html`Live demo | Alpine.js x-bound: Binding indeterminate (table) In this example, the
property of the checkbox is bound to the isPartialSelected data property.isPartialSelected is true, the checkbox will be in the indeterminate state.> [!NOTE]
indeterminate binding is one-way. Changes to the indeterminate property in the DOM (e.g., via user interaction or programmatically) do not update the bound data property.
$3 The directive also supports synchronizing values between two data properties.
`html`Live demo | Alpine.js x-bound: Binding data properties In this example, we bind the outer
property to the inner count property. Since number is initially set to 5,count property is also set to 5 when the binding occurs.By default, the binding is two-way, so changes in
count are reflected in number and vice versa.But what if we want changes to propagate in one direction only? For this case, the
x-bound directive> [!TIP]
inout: Binding works in both directions. This means that changes in one property are automatically reflected in the other and vice versa. This modifier is used by default.&count="number", then changing the value of count will also change the value of number, and vice versa.in: Binding works in one direction only ā from the source property to the target property. This means that changes in the source property are passed to the target property, but changes in the target property do not affect the source property.&count.in="number", then changes in number will be passed to count, but changes in count will not be reflected in number.out: Binding works in one direction only ā from the target property to the source property. This means that changes in the target property are passed to the source property, but changes in the source property do not affect the target property.&count.out="number", then changes in count will be passed to number, but changes in number will not be reflected in count.> [!NOTE]
inout) can also be achieved using the x-model and x-modelable` directives.
Source code https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/bound
Related packages AlpineGear Alpine.js .You can find the full list of related packages and their documentation here:
Contributions
License MIT License .LICENSE file for more details.