Cet attribut nécessite quelques connaissances en JavaScript, en particulier les expressions conditionnelles (qui renvoient true ou false). Si l’expression conditionnelle revoie true, le bloc est supprimé du code HTML, si l’expression renvoie false, il est conservé.
Exemple :
<div data-remove-if="orientationEcran=='portrait'">
<h1>Liste des personnes à contacter</h1>
<ul>
<li>Chef de projet : Monsieur Madeleine</li>
<li>Responsable Support : Jean Valjean</li>
<li>Responsable Design : Cosette Pontmercy</li>
</ul>
</div>Ce bloc affiche la liste des personnes à contacter, sauf si la variable orientationEcran est égale à « portrait ».
Attention : populate() explore les balises contentant data-remove-if uniquement au moment où elle est exécutée. Si l’utilisateur fait pivoter son écran après affichage, rien ne changera. Sauf si l’évènement est intercepté et la fonction populate() est réexécutée.
Exploitation des données de l’ilot XML dans data-remove-if #
La fonction populate() commence par exécuter data-src afin de remplacer toutes les chaines entre accolades par leur valeur. Il est donc possible d’utiliser un data-remove-if avec des données venant de l’ilot comme ceci :
<div data-src="application.editeur" data-remove-if="'{lienSupport}' == ''">
<h1>Liste des personnes à contacter</h1>
<ul>
<li>Chef de projet : Monsieur Madeleine</li>
<li>Responsable Support : jean Valjean</li>
<li>Responsable Design : Cosette Pontmercy</li>
</ul>
</div>Dans cet exemple, si lienSupport est vide (dans l’ilot XML), la condition donne true et le bloc est supprimé.
Note pour les développeur back-end #
Il est important de noter que le code source (coté client) reste pleinement visible lorsqu’on demande de l’afficher. L’utilisation de data-remove-if n’est donc pas recommandée pour masquer des informations confidentielles. Ce type de traitement doit toujours s’effectuer côté serveur afin que le navigateur ne reçoive pas les informations sensibles.
