Dans certains cas, il peut être intéressant de transférer des blocs entiers de l’ilot vers le document (la zone du <body>). Ceci se fait grâce à des 3 attributs que populate() sait interpréter. Les voici :
L’Attribut data-transfer #
Permet de déplacer le contenu d’un bloc se trouvant dans l’ilot vers une zone du body. Ainsi si le bloc de l’ilot contient du html, il suffit d’en déplacer le contenu pour qu’il s’affiche.
Exemple :
<!--Contenu de l'ilot-->
<ImportantInformations>
<li><span>nb de centres</span><span>25</span></li>
<li><span>nb d'inclusions</span><span>412</span></li>
<li><span>nb de dossiers traités</span><span>356</span></li>
</ImportantInformations>
L’ilot xml contient du html (cas rare)
<!--Contenu du body-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<ul class="list-group" data-transfer="ImportantInformations">
</ul>
</div>
</div>data-transfer indique à populate() de placer dans <ul>, les 3 <li> se trouvant dans le bloc <ImportantInformations> de l’ilot. Autrement dit, le développeur désigne les nœuds parents, mais ce sont les nœuds enfants qui sont concernées.
Attribut data-replacetags #
Les bonnes pratiques du XML invitent à nommer les balises de l’ilot en veillant à la sémantique (comme les champs d’une base de données ou les propriétés d’un objet). Par exemple :
<!--Contenu de l'ilot-->
<ImportantInformations>
<Information>
<label>nb de centres</label>
<value>25</value>
</Information>
<Information>
<label>nb d'inclusions</label>
<value>412</value>
</Information>
<Information>
<label>nb de dossiers traités</label>
<value>356</value>
</Information>
</ImportantInformations>Dans ce cas, la copie du bloc ne suffira pas à produire un bel affichage (il faut du html).
data-replacetags, permet de renommer les balises après le transfert :
<!--Contenu du body-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<ul class="list-group" data-transfer="ImportantInformations"
data-replacetags='"Information":"li",
"label":"span",
"value":"span"'>
</ul>
</div>
</div><Information> devient <li>, <label> devient <span>, et <value> devient <span>.
Après transformations, on se retrouve donc avec ce bloc :
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<ul class="list-group>>
<li>
<span>nb de centres</span>
<span>25</span>
</li>
<li>
<span>nb d'inclusions</span>
<span>412</span>
</li>
<li>
<span>nb de dossiers traités</span>
<span>356</span>
</li>
</ul>
</div>
</div>data-replacetags est indépendant de data-transfer. Il est possible de l’utiliser dans d’autres contextes que le transfert de blocs. Par exemple, pour remplacer des <p> par des <div>, des <ul> par de <ol>, etc.
Important : data-replacetags agit dans la zone du body et non dans l’ilot.
Attribut data-replaceattrbytag #
En fonction du choix des développeurs back-end, les données peuvent être sérialisées sous forme d’attributs. Parfois, ces attributs devront être transformés en éléments. Par exemple, ici on voudrait que les attributs label et value soient transformés en éléments <span> :
<ImportantInformations>
<Information label="nb de centres" value="25"></Information>
<Information label="nb d'inclusions" value="412"></Information>
<Information label="nb de dossiers traités" value="356"></Information>
</ImportantInformations>
data-replaceattrbytag qui permet à populate() de faire ce travail.
<!--Contenu du body-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<ul class="list-group" data-transfer="ImportantInformations"
data-replacetags='"Information":"li"'
data-replaceattrbytag='"label":"span",
"value":"span"'>
</ul>
</div>
</div>Le résultat reste le même que dans les autres cas ci-dessus. Il est donc possible de couvrir la une bonne partie des situations où le code XML doit être transformé en HTML. Lorsque ces attributs ne permettent pas d’obtenir le résultat souhaité, il convient d’utiliser data-iteration (qui est beaucoup plus lent).
