Gabarit HTML 5

Prendre avantage de l'élément <template> du HTML 5 avec le plugiciel data json

Donnée JSON utilisé pour les examples suivantes

Fichier: demo/data-fr.json

{
	"frais": {
		"ABC": "20$"
	},
	"produit": "Bonjour le monde",
	"produits": [
		"Mon nouveau produit",
		"Mon deuxième produit",
		"Mon produit numéro 3"
	],
	"etats": "text-muted",
	"jesuisvrai": true,
	"jesuisfaux": false,
	"jour":"2016-11-05T01:42:31Z",
	"unTableau": [
		{ "nom": "Item 1", "prop": "rouge" },
		{ "nom": "Item 2", "prop": "bleu" },
		{ "nom": "Item 3", "prop": "jaune" },
		{ "nom": "Item 4", "prop": "violet" }
	],
	"bureaux": [
		{ "nom": "Jean Edmonds, Tour nord", "num": 300, "rue": "Slater", "ville": "Ottawa", "css": "bg-success" },
		{ "nom": "Place du portage, Phase I", "num": 50, "rue": "Victoria", "ville": "Gatineau", "css": "bg-danger" }
	],
	"auteur": "<a href=\"https://github.com/duboisp/\">Pierre Dubois</a> a créé la fonctionalité data-json",
	"commentaire": {
		"2017-1": {
			"nom": "M. X",
			"ville": "Gatineau",
			"quelquesChoseHTML": "<strong>Horay</strong> ici du contenu HTML enrichie",
			"passetemps": [ "Voiture", "Mécanique", "Course" ]
		},
		"2017-2": {
			"nom": "Mme. Y",
			"ville": "St-Pierre",
			"quelquesChoseHTML": "le mot <strong>Youpi</strong> devrais avoir de la mise en évidence",
			"passetemps": [ "Spa", "Nature", "Bicyclette", "Lecture" ]
		}
	}
}

Liste

Liste de définition:

Non-ordonnée:

Ordonnée:

Code source
<p>Liste de définition:</p>
<dl class="dl-horizontal" data-wb-json='{
		"url": "demo/data-fr.json#/unTableau",
		"mapping": [
			{ "selector": "dt", "value": "/nom" },
			{ "selector": "dd", "value": "/prop" }
		]
	}'>
	<template>
		<dt></dt>
		<dd></dd>
	</template>
</dl>

<p>Non-ordonnée:</p>
<ul class="lst-spcd" data-wb-json='{
		"url": "demo/data-fr.json#/unTableau",
		"queryall": "li",
		"mapping": [
			"/nom"
		]
	}'>
	<template>
		<li></li>
	</template>
</ul>

<p>Ordonnée:</p>
<ol class="lst-spcd" data-wb-json='{
		"url": "demo/data-fr.json#/unTableau",
		"queryall": "li",
		"mapping": [
			"/nom"
		]
	}'>
	<template>
		<li></li>
	</template>
</ol>

Interpréter en HTML du contenu JSON

Avec l'interprétation HTML
Nom Ville Quelques chose en HTML
Sans l'interprétation HTML
Nom Ville Quelques chose en HTML
Source code
<table class="table">
	<caption>Avec l'interprétation HTML</caption>
	<thead>
		<tr>
			<th>Nom</th>
			<th>Ville</th>
			<th>Quelques chose en HTML</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
			"url": "demo/data-fr.json#/commentaire",
			"tobeclone": "tr",
			"queryall": "td",
			"source": "#tblHTMLRender",
			"mapping": [
				"/nom",
				"/ville",
				{ "value": "/quelquesChoseHTML", "isHTML": true }
			]
		}'>
	</tbody>
</table>

<template id="tblHTMLRender">
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</template>

<table class="table">
	<caption>Sans l'interprétation HTML</caption>
	<thead>
		<tr>
			<th>Nom</th>
			<th>Ville</th>
			<th>Quelques chose en HTML</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
			"url": "demo/data-fr.json#/commentaire",
			"tobeclone": "tr",
			"queryall": "td",
			"source": "#tblHTMLRender2",
			"mapping": [
				"/nom",
				"/ville",
				"/quelquesChoseHTML"
			]
		}'>
	</tbody>
</table>

<template id="tblHTMLRender2">
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</template>

Sous-modèle

Source code
<div class="row" data-wb-json='{
		"url": "demo/data-fr.json#/commentaire",
		"mapping": [
			{ "selector": "h3", "value": "/nom" },
			{ "selector": ":nth-child(2)", "value": "/ville", "placeholder": "[[ville]]" },
			{ "selector": ":nth-child(3)", "value": "/quelquesChoseHTML", "isHTML": true },

			{ "selector": "ul", "value": "/passetemps", "queryall": "li" }
		]
	}'>
	<template>
		<div class="col-md-6">
			<h3></h3> <!-- Nom -->
			<p>De: [[ville]]</p>
			<p></p> <!-- Description -->
			<h4>Hobby:</h4>
			<ul class="lst-spcd"> <!-- Conteneur du sous-modèle -->
				<template>
					<li></li>
				</template>
			</ul>
		</div>
	</template>
</div>

Répéter à partir d'un objet JSON

Lorsqu'on selectionne un objet JSON à la place d'un tableau, celui va être transformé en tableau selon un style similaire au JSON-LD sous sa forme étendu. Vous trouverez dans la documentation du data-json des examples illustrant les transformations d'objet vers un tableau.

Code source
<ul class="lst-spcd" data-wb-json='{
		"url": "demo/data-fr.json#/unTableau/2",
		"queryall": "li",
		"mapping": "/@value"
	}'>
	<template>
		<li></li>
	</template>
</ul>

Tableau

Veuillez noter: Lorsque vous utilisé un template pour ajouter des lignes à un tableau, il existe une problématique lorsque l'élement <template> est situé à l'intérieur de l'élément <table> et ce seulement avec le fureteur IE. Afin de contourner le problème, il suffit de déplacer l'élément <template> en dehors de la porté dudit tableau. Idéalement il serait situé à la suite de celui-ci. D'ailleurs, il sera necessaire d'ajouter l'élément <table> à l'intérieur du <template> afin de définir le gabarit de vos ligne. Par la suite, il vous suffira de configurer tobeclone et source afin d'établir un lien entre votre gabarit et le plugiciel data json.

Nom Numéro Rue Ville
Modifier des attributs et utiliser des espaces réservé
Nom Numéro Rue Ville
Place du centre 200 Promenade du Portage Gatineau
Jean Edmonds, Tour sud 365 Laurier ave O Ottawa
Source code
<table class="table">
	<thead>
		<tr>
			<th>Nom</th>
			<th>Numéro</th>
			<th>Rue</th>
			<th>Ville</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
			"url": "demo/data-fr.json#/bureaux",
			"tobeclone": "tr",
			"queryall": "td",
			"source": "#tbl1",
			"mapping": [
				"/nom",
				"/num",
				"/rue",
				"/ville"
			]
		}'>
	</tbody>
</table>

<template id="tbl1">
	<table>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</template>

<table class="table">
	<caption>Modifier des attributs et utiliser des espaces réservé</caption>
	<thead>
		<tr>
			<th>Nom</th>
			<th>Numéro</th>
			<th>Rue</th>
			<th>Ville</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
		"url": "demo/data-fr.json#/bureaux",
		"source": "#tbl2",
		"tobeclone": "tr",
		"mapping": [
			{ "selector": "td", "value": "/nom", "placeholder": "[[nom]]" },
			{ "selector": "td:nth-child(2)", "value": "/css", "attr": "class" },
			{ "selector": "td:nth-child(2)", "value": "/num" },
			{ "selector": "td:nth-last-child(2)", "value": "/rue" },
			{ "selector": "td:last-child", "value": "/ville" }
		]
	}'>
		<tr>
			<td>Place du centre</td>
			<td>200</td>
			<td>Promenade du Portage</td>
			<td>Gatineau</td>
		</tr>
		<tr>
			<td>Jean Edmonds, Tour sud</td>
			<td>365</td>
			<td>Laurier ave O</td>
			<td>Ottawa</td>
		</tr>
	</tbody>
</table>

<template id="tbl2">
	<table>
		<tr>
			<td>Le nom est: [[nom]]</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</template>

Filtrage

Non recommander Cette fonctionnalité fonctionne mais nous recommendons d'utiliser le gestionnaire JSON au lieu.

Code source à titre de référence
<p>Lors d'une condition <strong>affirmative</strong> :</p>
<ul data-wb-json='{
		"url": "demo/data-fr.json#/unTableau",
		"queryall": "li",
		"mapping": [
			"/nom"
		],
		"filter": [
			{ "path": "/prop", "value": "bleu" }
		]

	}'>
	<template>
		<li></li>
	</template>
</ul>

<p>Lors d'une condition <strong>négative</strong> :</p>
<ul data-wb-json='{
		"url": "demo/data-fr.json#/unTableau",
		"queryall": "li",
		"mapping": [
			"/nom"
		],
		"filternot": [
			{ "path": "/prop", "value": "bleu" }
		]

	}'>
	<template>
		<li></li>
	</template>
</ul>

<p>Combinaison des deux conditions :</p>
<ul data-wb-json='{
		"url": "demo/data-fr.json#/unTableau",
		"queryall": "li",
		"mapping": [
			"/nom"
		],
		"filter": [
			{ "path": "/prop", "value": "jaune", "optional": true },
			{ "path": "/prop", "value": "bleu", "optional": true }
		],
		"filternot": [
			{ "path": "/prop", "value": "bleu" }
		]

	}'>
	<template>
		<li></li>
	</template>
</ul>

Utilisé l'espace réserver avec un template pour ajouter à un élément

(Pour voir cet example pratique, regarder le contenu de l'élément title de cette page)

<template id="metadatacontent"  data-wb-json='{
		"url": "demo/data-fr.json#/produit",
		"appendto": "title",
		"source": "#metadatacontent",
		"mapping": [
			{ "placeholder": "[[fantastique]]" }
		]
	}'> *** [[fantastique]] ***</template>

Mise en forme d'un flux RSS

Le flux RSS suivant est lu à partir du service web Yahoo YQL Web Service URLs. Le lien directe vers le flux RSS est : http://www.tc.gc.ca/medias/rss/routier.xml

Source code
<div data-wb-json='{
		"url": "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%20%3D%20&#39;http%3A%2F%2Fwww.tc.gc.ca%2Fmedias%2Frss%2Froutier.xml&#39;%20limit%2019&amp;format=json#/query/results/item",
		"mapping": [
			{ "selector": "h3", "value": "/title", "placeholder": "" },
			{ "selector": "a", "value": "/description" },
			{ "selector": "a", "value": "/link", "attr": "href" },
			{ "selector": "span", "value": "/pubDate", "placeholder": "[[pubdate]]" }
		]
	}'>

	<template>
		<h3></h3>
		<p><span>Publish on [[pubdate]]</span> <a href=""></a></p>
	</template>
</div>
Date de modification :