<div x-data="{
albums: [],
fetchAlbums() {
fetch('/albums')
.then(response => response.json())
.then(knowledge => {
this.albums = knowledge;
});
}
}">
<ul>
<template x-for="album in albums":key="album.id">
<li x-text="album.title"></li>
</template>
</ul>
<button @click on="fetchAlbums()">Load Albums</button>
</div>
For this one, x-data is the attribute that creates the Alpine element and it defines the mandatory client-side state (albums) and a bespoke methodology for fetching the information from the server (fetchAlbums). Discover the view contained in the unordered listing (the <ul>) makes use of some additional Alpine attributes (x-for and x-text) to carry out an iteration and describe find out how to output the state to the display screen.
The state is held in x-data attributes and Alpine’s job is to take that state and make sure the UI displays it robotically. The information from the server, as quickly as it’s acquired by Alpine’s fetch name, will probably be rendered by the view. Right here’s what the information coming again for this instance may appear to be:
[
{ "id": 1, "name": "The Dark Side of the Moon" },
{ "id": 2, "name": "Kind of Blue" },
{ "id": 3, "name": "Abbey Road" },
{ "id": 4, "name": "Rumours" }
]
After we evaluate HTMX knowledge with Alpine’s, the distinction between REST (the place the illustration of the state, which means the view, is transferred) and REST-like (as generally applied with JSON APIs) could be very clear. HTMX desires to ship chunks of the precise view containing the state, and Alpine desires to ship chunks of an information format (JSON) after which rework it right into a view on the shopper.
