A regular Alpine component is instantiated via the HTML attribute x-data
of some HTML element and bound to the same HTML element (so that Alpine x-*
bindings come into action). The x-data
attribute refers to component data defined somewhere: An inline JSON definition, an external function or by using Alpine.data()
. With Loki, we use exclusively Alpine.data()
.
A Loki Component is an Alpine component. However, the x-data
attribute refers to ready-made components (like the base LokiComponent
). Through this, each Loki Component gets a lot of out-of-the-box functionality, among which the option to submit data back to the server with an AJAX request and to update other HTML elements using the AJAX response.
You would transform a regular component into a Loki Component, if you would like to add the following features:
<target/>
ComponentViewModel
)