Table Filtering JJ down v1.0-next.2

Templating content with HandlebarsJS

The templating engine is Handlebarsjs, so read the handlebars and mustache documentation/manual to know how to create your own template.

Use of an inline template

<div class="well">
	<div class="wb-hbs" data-wb-hbs='{
		"template": "#mytemplate",
		"data": {
			"firstName": "Pierre",
			"lastName": "Dubois"
		}
	}'></div>
</div>

<div class="hidden">
	<div id="mytemplate">
		<h1>My first template</h1>
		<p>Created by: {{firstName}} {{lastName}}</p>
	</div>
</div>

Use of an inline template but with an external JSON

<div class="well">
	<div class="wb-hbs" data-wb-hbs='{
		"template": "#my2template",
		"data": "data-1.json"
	}'></div>
</div>


<div class="hidden">
	<div id="my2template">
		<h1>My second template</h1>
		<p>Created by: {{firstName}} {{lastName}}</p>
	</div>
</div>

Use of an external template with an external JSON

Content of data-1.json

{
	"@context": {
		
	},
	"firstName": "Toufic",
	"lastName": "Sbeiti",
	"country": {
		"CA": "Canada",
		"BG": "Belgique"
	}
}

Without any mapping

<div class="well">
	<div class="wb-hbs" data-wb-hbs='{
		"srctpl": "template-1.hbs",
		"data": "data-1.json"
	}'></div>
</div>

With simple mapping

<h3>With simple mapping</h3>
<div class="well">
	<div class="wb-hbs" data-wb-hbs='{
		"srctpl": "template-1.hbs",
		"data": "data-1.json",
        "mapping": {
        	"country" : "/"
        }
	}'></div>
    <p>Try the following link and see the country will be updated:</p>
    <ul>
    	<li><a href="?country=">Empty <code>?country=</code></a></li>
    	<li><a href="?country=CA">Canada <code>?country=CA</code></a></li>
    	<li><a href="?country=BG">Belgique <code>?country=BG</code></a></li>
    </ul>
</div>

Date modified:

2016-10-12