L’itération est l’une des opérations qui manquent le plus aux concepteurs de page web. Elle permet de présenter des données différentes de façon identique.
L’exemple le plus courant est le tableau de données dans lequel toutes les lignes sont présentées de façon similaire tout en affichant des informations différentes dans chaque cellule. Mais il peut également s’agir d’énumérations (ul/li) ou de documents dont la structure est répétitive (titres/paragraphes, images/commentaires, listes d’options, etc.).
Voici un exemple permettant d’utiliser populate() pour remplir une liste de type select/option :
Extrait de l’ilot XML :
...
<telechargement>
<introduction>
Notre application est compatible avec la plupart de systèmes connus.
Veuillez sélectionner la version que vous souhaitez télécharger :
</introduction>
<conclusion>
Le fichier téléchargé doit être copié sur l'ordinateur que vous utiliserez.
Une fois copié, exécutez le fichier pour lancer l'installation.
</conclusion>
<systemes>
<os nomCourt="W10" libelle="Windows 10"></os>
<os nomCourt="iOS" libelle="Apple Operating System"></os>
<os nomCourt="AND" libelle="Android"></os>
<os nomCourt="LX" libelle="Linux"></os> </systemes>
</telechargement>
…
Extrait de la page HTML :
...
<div data-src="telechargement">
<p>{introduction}</p>
<select data-iteration="systemes().os">
<option value="{nomCourt}">{libelle}</option>
</select>
<p><b>{conclusion}</b></p>
</div>
...Ce bloc html commence par l’affichage d’un paragraphe d’introduction et se termine par un paragraphe de conclusion en caractères gras (conformément au mode de fonctionnement de data-src vu précédemment). Entre ces deux paragraphes, se trouve un select qui semble n’avoir qu’une seule option :
<option value= »{nomCourt} »>{libelle}</option>
La fonction populate() duplique cette ligne 4 fois, car dans l’ilot XML, il y a 4 os dans la collection systemes. Après chaque copie, populate() remplit les variables {nomCourt} et {libelle} en puisant les attributs de
chaque os.
Le bloc qui contient l’attribut data-iteration est appelé bloc parent. Il imbrique un ou plusieurs blocs enfants. Seuls les blocs enfants sont itérés. Le bloc parent sert juste à annoncer l’itération, mais il ne fait pas partie des éléments dupliqués.
Limite du nombre d’itérations #
Il est possible de limiter le nombre d’itérations en plaçant un nombre dans la parenthèse de la collection, comme ceci :
<select data-iteration="systemes(3).os">
<option value="{nomCourt}">{libelle}</option>
</select>Dans cet exemple, l’itération ne concernera que les 3 premiers os de la collection systemes.
Options des prochaines versions #
Etendues des itérations #
- systemes(2-4).os : puisera ses données dans les os 2 à 4
- systemes(-3).os : puisera ses données dans les 3 derniers os
- systemes(3-).os : puisera ses données dans tous les os à partir du 3ème
Filtrage des éléments itérés #
- Systemes(libelle=’windows’).os : filtrera uniquement les os dont le libelle est égal à ‘windows’
- Systemes(libelle!=’windows’).os : filtrera uniquement les os dont le libelle est différent de ‘windows’
- Systemes(libelle*=’windows’).os : filtrera uniquement les os dont le libelle contient ‘windows’
- Systemes(libelle^=’windows’).os : filtrera uniquement les os dont le libelle commence par ‘windows’
- Systemes(libelle$=’windows’).os : filtrera uniquement les os dont le libelle se termine par ‘windows’
(Ces syntaxes sont familières aux utilisateurs de Jquery)
Itérations imbriquées #
Il est possible d’imbriquer les itérations sur plusieurs niveaux (principe des boucles imbriquées dans les langages traditionnels). Par exemple, pour afficher une liste dans chaque ligne d’un tableau.
Utilisation de data-unwrap #
Dans quelques cas rares, l’utilisation des itérations nécessite de créer des éléments parents qui pourraient affecter l’affichage. Ces éléments parents peuvent être supprimés après l’exécution de l’itération grâce à data-unwrap. Par exemple :
<select>
<option value="">Veuillez sélectionner votre système</option>
<div data-iteration="systemes().os" data-unwrap="true">
<option value="{nomCourt}">{libelle}</option>
</div>
</select>La première option ne doit pas être itérée. data-iteration ne peut être donc pas être placé dans le select. Il faut donc placer une balise parente (div dans notre exemple) pour encadrer la ligne à itérer. Or après l’itération la div doit disparaître. L’attribut data-unwrap permet de se débarrasser de l’élément parent sans altérer les blocs enfants.
