AlpineJS
Beautifully integrate your client-side JavaScript and CBWIRE using AlpineJS.
Last updated
Was this helpful?
Beautifully integrate your client-side JavaScript and CBWIRE using AlpineJS.
Last updated
Was this helpful?
Many page interactions don't warrant a full server roundtrip, such as toggling a modal or a hidden element. In these instances, we recommend using .
For more installation information, visit the .
Below is an example of using to toggle a list on the page.
You need CBWIRE v2.3.6 or greater to use entangle.
CBWIRE has a powerful entangle() method that allows you to "entangle" a CBWIRE and AlpineJS data property. With entanglement, both client-side and server-side properties are instantly synchronized, regardless of whether the value was changed server-side in CFML or client-side using JavaScript.
This provides data model binding both client-side and server-side.
And now, our template:
We define an AlpineJS property named counter and then call the built-in CBWIRE method entangle(), passing it the name of the server-side data property we want to bind with.
Next, we are incrementing our Counter in two separate ways:
Updating CBWIRE server-side on every AlpineJS property change is optional. You can also delay the server-side updates until the next CBWIRE request that goes out by chaining a .defer modifier like so.
Consider this simple Counter :
Incrementing the counter by calling the increment using CBWIRE
Incrementing the AlpineJS property counter value in JavaScript, triggering an immediate update to the server and re-rendering of the Counter .