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 : 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>

Détails de la page

Signaler un problème ou une erreur sur cette page

Date de modification :: 2017-01-31

Gabarit HTML 5

Liste

Interpréter en HTML du contenu JSON

Sous-modèle

Hobby:

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

Tableau

Filtrage

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

Mise en forme d'un flux RSS

Détails de la page

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