Alpine.js e List.js insieme

**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.

Discussione: Alpine.js e List.js insieme

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Permessi di invio