Comment on page
AlpineJS
Alpine JS brings simple client-side reactivity when you need it and integrates beautifully with CBWIRE.
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 AlpineJS.
AlpineJS allows you to add JavaScript behavior directly into your markup in a declarative way. If you are familiar with VueJS, Alpine should feel similar.
<head>
<script src="//unpkg.com/alpinejs" defer></script>
<!-- The "defer" attribute is important to ensure Alpine waits for CBWIRE to load first. -->
</head>
<div>
<div x-data="{ open: false }">
<button @click="open = true">Show More...</button>
<ul x-show="open" @click.away="open = false">
<li><button wire:click="archive">Archive</button></li>
<li><button wire:click="delete">Delete</button></li>
</ul>
</div>
</div>
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 in CFML or client-side using JavaScript.
You need CBWIRE v2.3.6 or greater to use entangle().
This provides data model binding both client-side and server-side.
Consider this simple Counter component:
<!--- ./wires/Counter.cfm --->
<cfscript>
data = {
"counter": 0
};
function increment() {
data.counter += 1;
}
</cfscript>
<cfoutput>
<div x-data="{ counter: #entangle( 'counter' )# }">
<div>CBWIRE value: #counter#</div>
<div>AlpineJS value: <span x-html="counter"></span></div>
<button
wire:click="increment"
type="button">Increment with CBWIRE</button>
<button
@click="counter += 1"
type="button">Increment with AlpineJS</button>
</div>
</cfoutput>
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.
<div x-data="{ counter: #entangle( 'counter' )# }">
Next, we are incrementing our Counter in two separate ways:
- Incrementing the counter by calling the increment() action using CBWIRE
- Incrementing the AlpineJS property counter in JavaScript, triggering an immediate update to the server and re-rendering of the component.
<button wire:click="increment" type="button">Increment with CBWIRE</button>
<button @click="counter += 1" type="button">Increment with AlpineJS</button>
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.
<div x-data="{ counter: #entangle( 'counter' )#.defer }">
Last modified 2mo ago