Mmm... non esattamente: Alpine.js ti garantisce che la pagina venga aggiornata a fronte del cambiamento dei dati che scegli come "modello", quello che fornisci con x-data per intenderci.Originariamente inviata da fermat
Questo vuol dire che tu non devi interagire con Alpine, ma semplicemente trovare il modo di ordinare i dati del modello che Alpine legge per visualizzarli nella pagina.
Prova a procedere in questo modo: invece di un solo array items[], usane due, uno che contenga tutti gli elementi, e l'altro array che contenga solo quelli filtrati/ordinati. Poi usa le funzioni di JavaScript degli array per ordinare e filtrare il primo array mettendo nel secondo i valori ottenuti, e infine usa il secondo array per la visualizzazione.
In questo modo vedrai che la pagina funziona.
Qui List.js non ti serve perché l'unico valore aggiunto che ti da è ordinare elementi della pagina generati a partire dai dati, ma tu devi ordinare direttamente i dati. Analogamente, Alpine.js non si interessa dell'ordinamento dei dati: questo lo fai tu con le funzioni di JavaScript, e fornendo questi dati filtrati/ordinati ad Alpine.js la libreria si occupa di aggiornarti la pagina di conseguenza.
Alla fine, questo è il vantaggio di usare Alpine: tu dici (tramite le direttive) quali sono i dati da osservare e come rappresentarli in HTML, poi lavori esclusivamente sui dati, dando per scontato che al loro cambiamento il lavoro di Alpine è quello di farlo vedere nella pagina, senza che debba essere tu manualmente ad andare a manipolare il DOM e il contenuto della pagina stessa per ottenere questo.
Rispondi quotando