Différences

Ci-dessous, les différences entre deux révisions de la page.

--- informatique:javascript:alpinejs [26/04/2024 09:26] – cyrille
+++ informatique:javascript:alpinejs [31/12/2025 10:52] (Version actuelle) – [Select multiple] cyrille
@@ Ligne 17: / Ligne 17: @@
   * Quelques composants https://js.hyperui.dev dont un datepicker
   * https://alpine-ajax.js.org/ Fourni un raccourci pour charger dynamiquement du HTML dans un élément du DOM à partir d'un appel Ajax
-  *
+  * [[https://github.com/markmead/alpinejs-component|alpinejs-component]] permet de gérer des composants réutilisables.
+    * le tag ''x-component'' est modifiable. Voir la PR/MR https://github.com/markmead/alpinejs-component/pull/28
+===== Comparaison avec Juris JS =====
+  * https://dev.to/lynphp/alpinejs-to-jurisjs-migration-pure-debuggable-islandable-solution-4hp
+  * https://jurisjs.com/
+Alpine.js Limitations:
+  * Template-bound logic - Business logic mixed with HTML attributes
+  * Debugging challenges - Hard to debug x-data and x-show in DevTools
+  * No true islands - Global Alpine state affects entire page
+  * Limited composability - Difficult to share logic between components
+  * Opaque reactivity - Can't easily inspect state changes
+Juris.js Advantages:
+  * Pure JavaScript - All logic in debuggable JS functions
+  * True islands - Each enhancement is completely isolated
+  * Transparent state - Clear state management with full debugging support
+  * Service injection - Clean dependency injection pattern
+  * Selector targeting - Precise DOM targeting without attribute pollution
+===== Tips =====
+==== Select multiple ====
+Version simple ; utilise directement l'event ''$event.target.selectedOptions'' :
+<code html>
+<div class="mb-3">
+ <label for="rirSelect" class="form-label">Select RIR(s):</label>
+ <select id="rirSelect" class="form-select" multiple
+    @change="filterRirs($event.target.selectedOptions)">
+  <template x-for="rir in guiData.rirs" :key="rir.key">
+   <option x-bind:value="rir.key" x-text="rir.attributes.label"></option>
+  </template>
+ </select>
+</div>
+</code>
+Version avec bouton pour supprimer la sélection et désactiver ce bouton quand aucune sélection ; utilise un ''x-data'' :
+<code html>
+<div class="mb-3" x-data="{selectedOptions:[]}">
+ <label for="rirSelect" class="form-label">Select RIR(s):</label>
+ <button class="btn btn-outline-primary btn-sm"
+   x-bind:disabled="selectedOptions.length==0"
+   @click="selectedOptions=[];filterRirs()"
+   >All</button>
+ <select id="rirSelect" class="form-select" multiple
+   x-model="selectedOptions" @change="filterRirs(selectedOptions)"
+   >
+  <template x-for="rir in guiData.rirs" :key="rir.key">
+   <option x-bind:value="rir.key" x-text="rir.attributes.label"></option>
+  </template>
+ </select>
+</div>
+</code>