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": "Nom de lieu exemple 1", "num": 300, "rue": "Slater", "ville": "Ottawa", "css": "bg-success", "homeUrl": "https://github.com/wet-boew" },
		{ "nom": "Nom de lieu exemple 2", "num": 50, "rue": "Victoria", "ville": "Gatineau", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew" }
	],
	"listeAdresses": [
	{ "nom": "Nom de lieu exemple 1", "num": 100, "rue": "Slater", "ville": "Ottawa", "codePostal": "J8X 0I6", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "courriel": "info1@example.com" },
	{ "nom": "Nom de lieu exemple 2", "num": 65, "rue": "Victoria", "ville": "Gatineau", "codePostal": "J8S 0M6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "courriel": "info2@example.com" },
	{ "nom": "Nom de lieu exemple 3", "num": 87, "rue": "Slater", "ville": "Ottawa", "codePostal": "J9X 0I9", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "courriel": "info3@example.com" },
	{ "nom": "Nom de lieu exemple 4", "num": 34, "rue": "Victoria", "ville": "Gatineau", "codePostal": "J8P 0K6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "courriel": "info4@example.com" },
	{ "nom": "Nom de lieu exemple 5", "num": 980, "rue": "Slater", "ville": "Ottawa", "codePostal": "J8F 5P6", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "courriel": "info5@example.com" },
	{ "nom": "Nom de lieu exemple 6", "num": 1123, "rue": "Victoria", "ville": "Gatineau", "codePostal": "J8H 4K6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "courriel": "info6@example.com" },
	{ "nom": "Nom de lieu exemple 7", "num": 543, "rue": "Slater", "ville": "Ottawa", "codePostal": "J8G 0N7", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "courriel": "info7@example.com" },
	{ "nom": "Nom de lieu exemple 8", "num": 723, "rue": "Victoria", "ville": "Gatineau", "codePostal": "J8P 2I6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "courriel": "info8@example.com" },
	{ "nom": "Nom de lieu exemple 9", "num": 2345, "rue": "Slater", "ville": "Ottawa", "codePostal": "J8P 0I7", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "courriel": "info9@example.com" },
	{ "nom": "Nom de lieu exemple 10", "num": 56, "rue": "Victoria", "ville": "Gatineau", "codePostal": "J8X 0N6", "css": "bg-danger", "homeUrl": "https://github.com/wet-boew", "courriel": "info10@example.com" },
	{ "nom": "Nom de lieu exemple 11", "num": 200, "rue": "Slater", "ville": "Ottawa", "codePostal": "J8T 0I8", "css": "bg-success", "homeUrl": "https://github.com/wet-boew", "courriel": "info11@example.com" }
	],
	"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" ],
			"language": {
				"fr": {
					"description": "description de M. X",
					"about": "À propos de M. X",
					"test_undefined_override": ","
				},
				"en": {
					"description": "description of Mr X",
					"about": "About Mr X"
				}
			}
		},
		"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" ],
			"language": {
				"fr": {
					"description": "description de Mme. Y",
					"about": "À propos de Mme. Y"
				},
				"en": {
					"description": "description of Mrs Y",
					"about": "About Mrs Y"
				}
			}
		}
	}
}

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>

Affichage de JSON avec des valeurs nulles

Avec l'interprétation HTML
Sans l'interprétation HTML
Code source 
<div class="row">
	<div class="col-md-6">
		<span class="text-muted">Avec le rendu HTML</span>
		<dl class="dl-horizontal" data-wb-json='{
				"url": "demo/data-fr.json#/avecNullEtHtml",
				"mapping": [
					{ "selector": "dt", "value": "/nom" },
					{ "selector": "dd", "value": "/prop", "isHTML": true }
				]
			}'>
			<template>
				<dt></dt>
				<dd>N/D</dd>
			</template>
		</dl>
	</div>
	<div class="col-md-6">
		<span class="text-muted">Sans le rendu HTML</span>
		<dl class="dl-horizontal" data-wb-json='{
				"url": "demo/data-fr.json#/avecNullEtHtml",
				"mapping": [
					{ "selector": "dt", "value": "/nom" },
					{ "selector": "dd", "value": "/prop" }
				]
			}'>
			<template>
				<dt></dt>
				<dd>N/D</dd>
			</template>
		</dl>
	</div>
</div>

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[data-object]", "value": "/language",
				"source": "#gabaritExterneSousModele",
				"mapping": [
					{ "selector": "[data-language]", "value": "/@id" },
					{ "selector": "[data-test-undefined-override]", "value": "/test_undefined_override" },
					{ "selector": "[data-about]", "value": "/about" },
					{ "selector": "[data-about]", "value": "/@id", "attr": "lang" }
				]
			},

			{ "selector": "ul", "value": "/passetemps", "queryall": "li" }
		]
	}'>
	<template>
		<div class="col-md-6">
			<h3></h3> <!-- Nom -->
			<p>De: [[ville]]</p>
			<p></p> <!-- Description -->
			<!-- Sous-modèle (Itération d'object) -->
			<p>About:</p>
			<ul data-object>
			</ul>
			<h4>Hobby:</h4>
			<ul class="lst-spcd"> <!-- Sous-modèle (Itération de liste) -->
				<template>
					<li></li>
				</template>
			</ul>
		</div>
	</template>
	<template id="gabaritExterneSousModele">
		<li>(<span data-language></span>) <span data-about lang></span><span data-test-undefined-override>.</span></li>
	</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
Connection avec le plugiciels d'amélioration des tableaux wb-tables
Nom Adresse Courriel
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>


<!-- data-wb-json doit être définie sur le "table" element -->
<table class="table wb-tables" data-wb-json='{
	"url": "demo/data-fr.json#/listeAdresses",
	"source": "#tbl3",
	"mapping": [
		{ "selector": "a", "value": "/nom" },
		{ "selector": "a", "value": "/homeUrl", "attr": "href" },
		{ "selector": ".adresseRurale", "value": "/num", "placeholder": "[[num]]" },
		{ "selector": ".adresseRurale", "value": "/rue", "placeholder": "[[rue]]" },
		{ "selector": ".adresseRurale", "value": "/ville", "placeholder": "[[ville]]" },
		{ "selector": ".adresseRurale", "value": "/codePostal", "placeholder": "[[codep]]" },
		{ "selector": ".courriel", "value": "/courriel", "attr": "href", "placeholder": "adresseCourriel@example.com" },
		{ "selector": ".courriel", "value": "/courriel" }
	]
}'>
	<caption>Connection avec le plugiciels d'amélioration des tableaux <code>wb-tables</code></caption>
	<thead>
		<tr>
			<th>Nom</th>
			<th>Adresse</th>
			<th>Courriel</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

<template id="tbl3">
	<table>
		<tr>
			<td><a href=""></a></td>
			<td>
				<span class="adresseRurale">[[num]] [[rue]], [[ville]], [[codep]]</span>
			</td>
			<td><a class="courriel" href="mailto:adresseCourriel@example.com">adresseCourriel</a></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 : https://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;https%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>

Importation de fichier JSON via un référencement

Exemple d'importation de fichier JSON via un référencement

Échec du chargement d'un fichier JSON

Exemple d'échec du chargement d'un fichier JSON

Date de modification :