JavaScript Tiers

htmx s’intègre assez bien avec les bibliothèques tierces. Si la bibliothèque déclenche des événements sur le DOM, vous pouvez utiliser ces événements pour déclencher des requêtes via htmx.

Un bon exemple de ceci est la démonstration SortableJS :

<form class="sortable" hx-post="/items" hx-trigger="end">
    <div class="htmx-indicator">Mise à jour en cours...</div>
    <div><input type='hidden' name='item' value='1'/>Élément 1</div>
    <div><input type='hidden' name='item' value='2'/>Élément 2</div>
    <div><input type='hidden' name='item' value='2'/>Élément 3</div>
</form>

Avec Sortable, comme avec la plupart des bibliothèques JavaScript, vous devez initialiser le contenu à un moment donné.

Dans jQuery, vous pourriez faire ceci :

$(document).ready(function() {
    var sortables = document.body.querySelectorAll(".sortable");
    for (var i = 0; i < sortables.length; i++) {
        var sortable = sortables[i];
        new Sortable(sortable, {
            animation: 150,
            ghostClass: 'blue-background-class'
        });
    }
});

Dans htmx, vous utiliseriez plutôt la fonction htmx.onLoad, et vous sélectionneriez uniquement parmi le contenu nouvellement chargé, plutôt que l’ensemble du document :

htmx.onLoad(function(content) {
    var sortables = content.querySelectorAll(".sortable");
    for (var i = 0; i < sortables.length; i++) {
        var sortable = sortables[i];
        new Sortable(sortable, {
            animation: 150,
            ghostClass: 'blue-background-class'
        });
    }
})

Cela garantira que, lorsque du nouveau contenu est ajouté au DOM par htmx, les éléments triables sont correctement initialisés.

Si JavaScript ajoute du contenu au DOM contenant des attributs htmx, vous devez vous assurer que ce contenu est initialisé avec la fonction htmx.process().

Par exemple, si vous deviez récupérer des données et les insérer dans une div en utilisant l’API fetch, et que ce HTML contient des attributs htmx, vous devriez ajouter un appel à htmx.process() comme ceci :

let myDiv = document.getElementById('my-div')
fetch('http://example.com/movies.json')
    .then(response => response.text())
    .then(data => { myDiv.innerHTML = data; htmx.process(myDiv); });

Certaines bibliothèques tierces créent du contenu à partir d’éléments de modèle HTML. Par exemple, Alpine JS utilise l’attribut x-if sur les modèles pour ajouter du contenu de manière conditionnelle. Ces modèles ne font pas initialement partie du DOM et, s’ils contiennent des attributs htmx, nécessiteront un appel à htmx.process() après leur chargement. L’exemple suivant utilise la fonction watch d’Alpine pour surveiller un changement de valeur qui déclencherait un contenu conditionnel :

<div x-data="{show_new: false}"
     x-init="$watch('show_new', value => {
        if (show_new) {
            htmx.process(document.querySelector('#new_content'))
        }
    })">
    <button @click="show_new = !show_new">Basculer le nouveau contenu</button>
    <template x-if="show_new">
        <div id="new_content">
            <a hx-get="/server/newstuff" href="#">Nouveau clic</a>
        </div>
    </template>
</div>

Composants Web

Veuillez consulter la page d’exemples de composants Web pour des exemples sur la façon d’intégrer htmx avec des composants Web.