Data JSON

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" }
	]
}

<p>Mon produit ABC coûte <a data-json-replacewith="demo/data-fr.json#/frais/ABC" href="#">(consulter notre liste de frais)</a></p>

<p class="mrgn-tp-md">Vous consultez le produits "Bonjour le monde" &quot;<span data-json-replace="demo/data-fr.json#/produit">Inconnue</span>&quot;</p>

<p class="mrgn-tp-md" data-wb-json='[
		{
			"url": "demo/data-fr.json#/produit",
			"type": "replace"
		},
		{
			"url": "demo/data-fr.json#/etats",
			"type": "addclass"
		}
	]'>This is a paragraph.</p>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Après l'élément (<code>after</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-after="demo/data-fr.json#/produit">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "after" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">À la fin de l'élément (<code>append</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-append="demo/data-fr.json#/produit">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "append" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Avant l'élément (<code>before</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-before="demo/data-fr.json#/produit">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "before" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Au début de l'élément (<code>prepend</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-prepend="demo/data-fr.json#/produit">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "prepend" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Contenu de l'élément (<code>replace</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-replace="demo/data-fr.json#/produit">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "replace" }'>pharetra.</strong></p>
	</figure>
</div>
<div class="col-md-6">
	<figure>
		<figcaption class="h3">L'élément (<code>replacewith</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-replacewith="demo/data-fr.json#/produit">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-fr.json#/produit", "type": "replacewith" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Ajout d'une classe (<code>addclass</code>)</figcaption>
		<p data-wb-json='{ "url": "demo/data-fr.json#/etats", "type": "addclass" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</figure>
</div>
<div class="col-md-6">
	<figure>
		<figcaption class="h3">Enlever une classe (<code>removeclass</code>)</figcaption>
		<p class="text-muted" data-wb-json='{ "url": "demo/data-fr.json#/etats", "type": "removeclass" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Propriété (<code>prop</code>)</figcaption>
		<div class="checkbox">
		   <label><input type="checkbox" value="" data-wb-json='{ "url": "demo/data-fr.json#/jesuisvrai", "type": "prop", "prop": "checked" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
			<label><input type="checkbox" value="" checked="checked" data-wb-json='{ "url": "demo/data-fr.json#/jesuisfaux", "type": "prop", "prop": "checked" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</label>
		</div>
	</figure>
</div>
<div class="col-md-6">
	<figure>
		<figcaption class="h3">Valeur (<code>val</code>)</figcaption>
		<div class="form-group">
			<label class="col-sm-4 control-label" for="label-3">Lorem ipsum</label>
			<div class="col-md-8">
				<input id="label-3" type="text" class="form-control" data-wb-json='{ "url": "demo/data-fr.json#/etats", "type": "val" }' />
			</div>
		</div>
	</figure>
</div>