Alpine.js e List.js insieme

**fermat** · 30-05-2024, 09:24

ciao!

sto cercando di integrare alpine.js e list.js, che in pratica da delle varie funzioni di ordinamento e filtri lato client.
solo che non riesco, in quanto sostanzialmente list.js non funziona ma non da errori.
in pratica carico i dati, ma quando vado a fare il sorting da bottone, o faccio una ricerca, sparisce tutto.

questo il codice js:

codice:

function initData() {
  const url = "........";
  return {
    isLoading: false,
    items: [],
    getData() {
      this.isLoading = true;
      fetch(url)
          .then((response) => response.json())
          .then((data) => {
            this.items = data.books;
            this.isLoading = false;


            const options = {
              valueNames: ['title', 'author']
            };
            new List('books', options);
          });
    }
  }
}

questa la pagina html:

codice:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>


  <body>


    <div x-data="initData()" x-init="getData()">
      <div id="books">
        <input class="search" placeholder="Search">
        <button class="sort" data-sort="title">Sort by titolo</button>
        <button class="sort" data-sort="author">Sort by titolo</button>


        <ul class="list">
          <template x-for="item in items" :key="item.id">
            <li>
              <h3 class="title" x-text="item.title"></h3>
              <p class="author" x-text="item.author"></p>
            </li>
          </template>
        </ul>
      </div>
    </div>


  </body>


  <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script src="script.js"></script>
</html>

qualche idea??

**alka** · 30-05-2024, 10:13

Secondo me, non è un problema di "integrazione", ma di strutturazione del codice JavaScript.

Ad esempio, quando scrivi

codice:

this.items = data.books;
this.isLoading = false;

tu sei sicuro che quel this corrisponda all'oggetto che intendi tu?

Si tratta di una Arrow Function: hai capito bene nel dettaglio come funzionano?

**fermat** · 30-05-2024, 10:41

ciao alka!

allora, per sicuro direi abbastanza perchè la lista viene caricata.
da un banale console.log(this) mi sembra tutto ok.
nella pagina i dati li vedo.
quindi la parte gestita da alpine funziona.

è il dopo che non funziona, cioè il sorting e il searching.

poi sinceramente non so come strutturare meglio il codice.
ho fatto diverse prove, ma arrivo sempre allo stesso risultato, quindi sicuramente c'è un errore di fondo.

**alka** · 30-05-2024, 11:57

Originariamente inviata da fermat

è il dopo che non funziona, cioè il sorting e il searching.

Ma come avviene il sorting e il searching? Per visualizzare modifiche nella pagina tramite Alpine.js, che sta "guardando" gli items[], è necessario che l'ordinamento e il filtro vadano a modificare questa lista di oggetti, così che Alpine "reagisca" aggiornando la tabella.

Il fatto che tu non abbia due contenitori, uno per tutti gli elementi e un altro per gli elementi filtrati e/o ordinati, su cui si dovrebbe basare la visualizzazione, è un aspetto che mi insospettisce molto.

Purtroppo però qui si dovrebbe entrare nel merito del codice e di come è strutturato, come è realizzata la pagina, peraltro senza conoscere da parte mia il valore aggiunto di questo List.js.

Originariamente inviata da fermat

ho fatto diverse prove, ma arrivo sempre allo stesso risultato, quindi sicuramente c'è un errore di fondo.

Questo è certo, però un conto è analizzare le cause di un bug specifico riscontrato, un conto è dare suggerimenti validi per risolvere una situazione problematica legata a come le librerie vengono impiegate nella pagina, che mi pare sia la causa dell'effetto riscontrato: una pagina completamente vuota.

**fermat** · 30-05-2024, 13:56

ma in realtà il sorting ed il searching lo fa list.js attraverso le classi css.

in sostanza questo esempio con HTML statico, e non creato da alpine.js, funziona:

codice:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  </head>


  <body>


    <!--<div x-data="initData()" x-init="getData()">
      <div id="books">
        <input class="search" placeholder="Search">
        <button class="sort" data-sort="title">Sort by titolo</button>
        <button class="sort" data-sort="author">Sort by titolo</button>


        <ul class="list">
          <template x-for="item in items" :key="item.id">
            <li>
              <h3 class="title" x-text="item.title"></h3>
              <p class="author" x-text="item.author"></p>
            </li>
          </template>
        </ul>
      </div>
    </div>-->


    <div id="books">
      <input class="search" placeholder="Search">
      <button class="sort" data-sort="title">Sort by title</button>
      <button class="sort" data-sort="author">Sort by author</button>


      <ul class="list">
        <li>
          <h3 class="title">Cujo</h3>
          <p class="author">Stephen King</p>
        </li>
        <li>
          <h3 class="title">Iceberg</h3>
          <p class="author">Clive Cussler</p>
        </li>
        <li>
          <h3 class="title">Il dio del fiume</h3>
          <p class="author">Wilbur Smith</p>
        </li>
      </ul>
    </div>


  </body>


  <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script src="script.js"></script>
</html>

lo script.js cambia così, estraendo l'inizilizzazione di list.js:

codice:

function initData() {
  const url = "https://www.mattepuffo.com/api/book/get.php?t=fondazione";
  return {
    isLoading: false,
    items: [],
    getData() {
      this.isLoading = true;
      fetch(url)
          .then((response) => response.json())
          .then((data) => {
            console.log(this);
            this.items = data.books;
            this.isLoading = false;




          });
    }
  }
}


const options = {
  valueNames: ['title', 'author']
};
new List('books', options);

**alka** · 30-05-2024, 14:07

Originariamente inviata da fermat

ma in realtà il sorting ed il searching lo fa list.js attraverso le classi css.

in sostanza questo esempio con HTML statico, e non creato da alpine.js, funziona:

E' proprio questo il problema: tu stai usando due framework che si fanno carico - al posto tuo, senza che tu debba usare il DOM - di manipolare la pagina in base alle modifiche effettuate a una "base dati" (la lista degli elementi).

Non puoi usare entrambi i framework, perché si pestano i piedi tra loro: Alpine.js si aspetta un modello di dati e delle direttive per modificare le pagina in base a come essi cambiano nel tempo, mentre List.js prende anch'essa il controllo tentando di modificare l'ordinamento di elementi della pagina, gli stessi su cui agisce Alpine.

Il filtro e il sorting deve avvenire sui dati, non sulla pagina: a fronte dei cambiamenti ai dati, è Alpine che si preoccupa di riflettere le modifiche su filtro e ordinamento degli stessi sugli elementi visuali della pagina; List.js qui non serve a nulla.

**fermat** · 30-05-2024, 15:44

ok, in sostanza devo trovare come fare per eseguire le operazioni che fa list.js con alpine....

grazie per la dritta!

**alka** · 30-05-2024, 16:10

Originariamente inviata da fermat

ok, in sostanza devo trovare come fare per eseguire le operazioni che fa list.js con alpine....

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.

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.

**fermat** · 30-05-2024, 16:51

ottimo perfetto.
faccio qualche test!

intanto grazie mille!!

Discussione: Alpine.js e List.js insieme

Strumenti discussione

Ricerca discussione

Visualizza

Alpine.js e List.js insieme

Permessi di invio