Template with data-json - v1.1

Leverage HTML5 template element

HTML template element

Leverage HTML5 template element

JSON file used in the following example

[
	{ "name": "Pillar", "color": "Ticked Tabby", "sex": "Female (neutered)", "legs": 3, "css": "bg-success" },
	{ "name": "Hedral", "color": "Tuxedo", "sex": "Male (neutered)", "legs": 4, "css": "bg-danger" }
]

{
	"fees": {
		"ABC": "20$"
	},
	"product": "Hello world",
	"products": [
		"My new product",
		"My second product",
		"My product number 3"
	],
	"status": "text-muted",
	"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" }
	]
}

List

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

Definition list

<dl data-wb-json='{
		"url": "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

<ul data-wb-json='{
		"url": "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

<ul data-wb-json='{
		"url": "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

<ul data-wb-json='{
		"url": "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

<ul data-wb-json='{
		"url": "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

<ul data-wb-json='{
		"url": "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> need to be included in the <template> in order to avoid a bug in IE.

<table class="table">
  <thead>
  <tr>
    <th>Name <th>Color <th>Sex <th>Legs
  <tbody data-wb-json='{
		"url": "table-en.json",
		"queryall": "td",
		"source": "#row",
		"tplSelector": "tr",
		"mapping": [
			"/name",
			"/color",
			"/sex",
			"/legs"
		]
	}'>
</table>
  <template id="row">
  <table>
    <tr><td></td><td></td><td></td><td></td></tr>
  </table>
  </template>

Changing attribute and use place holder

<table class="table">
  <thead>
  <tr>
    <th>Name <th>Color <th>Sex <th>Legs
  <tbody data-wb-json='{
		"url": "table-en.json",
		"source": "#tbl2",
		"tplSelector": "tr",
		"queryall": "td",
		"mapping": [
			{ "value": "/name", "placeholder": "{{name}}" },
			{ "value": "/css", "attr": "class" },
			{ "value": "/sex" },
			{ "value": "/legs" }
		]
	}'>


	</tbody>
</table>

<template id="tbl2">
	<table>
		<tr><td>Name is: {{name}}<td class><td><td>
	</table>
</template>

Use QuerySelector for changing attribute and use place holder

<table class="table">
  <thead>
  <tr>
    <th>Name <th>Color <th>Sex <th>Legs
  <tbody data-wb-json='{
		"url": "table-en.json",
		"source": "#tbl3",
		"tplSelector": "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="tbl3">
	<table>
		<tr><td>Name is: {{name}}<td class><td><td>
	</table>
</template>

Add table row and instanciate wb-table plugins

<table class="table">
  <thead>
  <tr>
    <th>Name <th>Color <th>Sex <th>Legs
  <tbody data-wb-json='{
		"url": "table-en.json",
		"source": "#tbl3",
		"tplSelector": "tr",
		"trigger": "wb-tables",
		"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" }
		]
	}'>
	</tbody>
</table>

  <template id="tbl3">
  <table>
    <tr><td>Name is: {{name}}<td class><td><td>
   </table>
  </template>

Add row on a instanciated data table plugin

<table class="table wb-tables" data-wb-json='{
		"url": "table-en.json",
		"queryall": "td",
		"mapping": [
			"/name",
			"/css",
			"/sex",
			"/legs"
		]
	}'>
  <thead>
  <tr>
    <th>Name</th> <th>Color</th> <th>Sex</th> <th>Legs</th>
</tr>
</thead>
  <tbody>
	<tr>
		<td>Row 1</td><td>Row 1</td><td>Row 1</td><td>Row 1</td>
	</tr>
	<tr>
		<td>Row 2</td><td>Row 2</td><td>Row 2</td><td>Row 2</td>
	</tr>
	<tr>
		<td>Row 3</td><td>Row 3</td><td>Row 3</td><td>Row 3</td>
	</tr>
	<tr>
		<td>Row 4</td><td>Row 4</td><td>Row 4</td><td>Row 4</td>
	</tr>
  </tbody>
</table>

Use placeholder for appending to an element

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

Date modified:

2016-11-21