HTML5 Template with Data JSON - v1.1-a2

Leverage HTML5 template element

Leverage HTML5 template element

HTML template element

Leverage HTML5 template element

JSON file used in the following example

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" }
	],
	"offices": [
		{ "name": "Jean Edmonds, North Tower", "num": 300, "street": "Slater", "city": "Ottawa", "css": "bg-success" },
		{ "name": "Place du portage, Phase I", "num": 50, "street": "Victoria", "city": "Gatineau", "css": "bg-danger" },
	]
}

List

Source code 
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		]
	}'>
	<template>
		<li></li>
	</template>
</ul>

Definition list

Source code 
<dl data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"mapping": [
			{ "selector": "dt", "value": "/name" },
			{ "selector": "dd", "value": "/prop" }
		]
	}'>
	<template>
		<dt></dt>
		<dd></dd>
	</template>
</dl>

Filtering

Select only a set of items

Source code 
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		],
		"filter": [
			{ "path": "/prop", "value": "blue" }
		]

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

Select only a set of items base on a list of allowed value

Source code 
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		],
		"filter": [
			{ "path": "/prop", "value": "yellow", "optional": true },
			{ "path": "/prop", "value": "blue", "optional": true }
		]

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

Select only a set of items that is not

Source code 
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		],
		"filternot": [
			{ "path": "/prop", "value": "blue" }
		]

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

Select only a set of items then restrict by that is not

Source code 
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		],
		"filter": [
			{ "path": "/prop", "value": "yellow", "optional": true },
			{ "path": "/prop", "value": "blue", "optional": true }
		],
		"filternot": [
			{ "path": "/prop", "value": "blue" }
		]

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

Select only a set of items base on a restrict value

Source code 
<ul data-wb-json='{
		"url": "demo/data-en.json#/anArray",
		"queryall": "li",
		"mapping": [
			"/name"
		],
		"filternot": [
			{ "path": "/prop", "value": "yellow", "optional": true },
			{ "path": "/prop", "value": "blue", "optional": true }
		]

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

Table

Note: The <table> element need to be included inside the <template> in order to get it work with IE.

Name Number Street City
Source code 
<table class="table">
	<thead>
		<tr>
			<th>Name</th>
			<th>Number</th>
			<th>Street</th>
			<th>City</th>
		</tr>
	</thead>
	<tbody data-wb-json='{
			"url": "demo/data-en.json#/offices",
			"tobeclone": "tr",
			"queryall": "td",
			"source": "#tbl1",
			"mapping": [
				"/name",
				"/num",
				"/street",
				"/city"
			]
		}'>
	</tbody>
</table>

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

Modifying attribute and place holder

Name Number Street City
Place du centre 200 Promenade du Portage Gatineau
Jean Edmonds, South Tower 365 Laurier Ave W Ottawa
Source code 
<table class="table">
	<thead>
		<tr>
			<th>Name</th>
			<th>Number</th>
			<th>Street</th>
			<th>City</th>
		</tr>
	</thead>
  <tbody data-wb-json='{
		"url": "demo/data-en.json#/offices",
		"source": "#tbl2",
		"tobeclone": "tr",
		"mapping": [
			{ "selector": "td", "value": "/name", "placeholder": "[[name]]" },
			{ "selector": "td:nth-child(2)", "value": "/css", "attr": "class" },
			{ "selector": "td:nth-child(2)", "value": "/color" },
			{ "selector": "td:nth-last-child(2)", "value": "/sex" },
			{ "selector": "td:last-child", "value": "/legs" }
		]
	}'>
</table>

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

Use template placeholder for appending to an element

(To see this working example, take a look at the title element on this page)

<template id="metadatacontent"  data-wb-json='{
		"url": "data-en.json",
		"appendto": "title",
		"source": "#metadatacontent",
		"mapping": [
			{ "value": "/product", "placeholder": "[[great]]" }
		]
	}'> *** [[great]] ***</template>
Date modified: