Para este, x-data é o atributo que cria o componente alpino e define o estado do lado necessário (álbuns) e um método sob medida para buscar os dados do servidor (fetchAlbums). Observe a vista dentro da lista não ordenada (o ) usa alguns atributos alpinos adicionais (x-for e x-text) para executar uma iteração e descrever como gerar o estado para a tela.
O estado é mantido em x-data Os atributos e o trabalho de Alpine é aceitar esse estado e garantir que a interface do usuário reflita automaticamente. Os dados do servidor, assim que forem recebidos pela Alpine’s Buscle Call, serão renderizados pela visualização. Aqui está como os dados que estão voltando para este exemplo podem ser:
(
{ "id": 1, "name": "The Dark Side of the Moon" },
{ "id": 2, "name": "Kind of Blue" },
{ "id": 3, "name": "Abbey Road" },
{ "id": 4, "name": "Rumours" }
)
Quando comparamos os dados HTMX com a de Alpine, a diferença entre REST (onde a representação do estado, ou seja, a visão, é transferida) e o REST (como comumente implementado com APIs JSON) é muito claro. HTMX quer enviar pedaços do Visualização real Contendo o estado, e Alpine deseja enviar pedaços de um formato de dados (JSON) e depois transformá -lo em uma exibição no cliente.
