Later we use fir’s alpinejs plugin to enhance the form
submission and receive the re-rendered template as an
event. The event is handled by the
$fir.replace() helper function which
updates the inner content of the div on which the event
listener is declared. Click the buttons below to see
reactivity in action.
As you can notice, the count value is updated without a
page reload. The server side code remains unchanged.
Fir’s magic expression
@fir:event-name:event-state::template-name
piggybacks on
alpinejs event binding syntax
to declare
html/templates
to be re-rendered on the server.
If the handler response for event
inc is ok then
re-render the template named
count on the server and return the
html output to the event listener as a
CustomEvent. The
CustomEvent.detail
property is used by the alpinejs plugin helper
$fir.replace() to update the div
on which the listener is declared.
Go the the directory where you have these files and run:
go run counter.go
Open your browser and go to
http://localhost:9867
to see the reactive counter in action.