Data JSON

File: demo/data-en.json

{
	"fees": {
		"ABC": "20$"
	},
	"product": "Hello world",
	"products": [
		"My new product",
		"My second product",
		"My product number 3"
	],
	"status": "text-muted",
	"iamtrue": true,
	"iamfalse": false,
	"jour":"2016-11-05T01:42:31Z",
	"anArray": [
		{ "name": "Item 1", "prop": "red" },
		{ "name": "Item 2", "prop": "blue" },
		{ "name": "Item 3", "prop": "yellow" },
		{ "name": "Item 4", "prop": "purple" }
	]
}

<p>My product ABC cost <a data-json-replacewith="demo/data-en.json#/fees/ABC" href="#">(consult our fees schedule)</a></p>

<p class="mrgn-tp-md">Your are currently viewing the product &quot;<span data-json-replace="demo/data-en.json#/products/en">Unknown</span>&quot;</p>

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

<div class="col-md-6">
	<figure>
		<figcaption class="h3">After an element (<code>after</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-after="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "after" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">At the end of an element (<code>append</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-append="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "append" }'>pharetra.</strong></p>
	</figure>
</div>

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

<div class="col-md-6">
	<figure>
		<figcaption class="h3">At the start of an element (<code>prepend</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-prepend="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "prepend" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Content inside the element (<code>replace</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-replace="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "replace" }'>pharetra.</strong></p>
	</figure>
</div>
<div class="col-md-6">
	<figure>
		<figcaption class="h3">The element by the content (<code>replacewith</code>)</figcaption>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <strong data-json-replacewith="demo/data-en.json#/product">elit.</strong></p>
		<p>Vivamus ut turpis a elit laoreet <strong data-wb-json='{ "url": "demo/data-en.json#/product", "type": "replacewith" }'>pharetra.</strong></p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Add a class name (<code>addclass</code>)</figcaption>
		<p data-wb-json='{ "url": "demo/data-en.json#/status", "type": "addclass" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</figure>
</div>
<div class="col-md-6">
	<figure>
		<figcaption class="h3">Remove a class name (<code>removeclass</code>)</figcaption>
		<p class="text-muted" data-wb-json='{ "url": "demo/data-en.json#/status", "type": "removeclass" }'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</figure>
</div>

<div class="col-md-6">
	<figure>
		<figcaption class="h3">Property (<code>prop</code>)</figcaption>
		<div class="checkbox">
			<label><input type="checkbox" value="" data-wb-json='{ "url": "demo/data-en.json#/iamtrue", "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-en.json#/iamfalse", "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">Value (<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-en.json#/status", "type": "val" }' />
			</div>
		</div>
	</figure>
</div>