manubb / barbiche

Logic-full template engine for DOM & JavaScript

Barbiche - Template engine for DOM & JavaScript

Barbiche is a logic-full template engine for browser environment. It has been designed to give you complete control over the data you want to merge into an HTML fragment. Once minified and gzipped, Barbiche size is 11KB.

Documentation and interactive examples can be found here.

Features

Barbiche supports:

• text and HTML insertion
• conditions (if and optional else)
• aliases
• loops
• flexible subtemplate imports
• attribute setting
• class setting

Barbiche has a complete test suite that can be run in your browser.

Sample

We ask Barbiche to merge some data into an HTML template:

<template id="test">
	<div bb-alias="items[1].name: 'name'" bb-class="customClass">
		<div>{{name}}</div>
		<ul bb-attr="my_replace(attrValue): 'attr-name'">
			<template bb-repeat="items: 'item'">
				<li bb-if="item.show" bb-class="[item.species || 'unknown', (_item_ == 0): 'first']">
					{{item.name}} (index: {{_item_}})
				</li>
			</template>
		</ul>
		<span>{{item.join(', ').toUpperCase()}}</span>
		{{{some_html}}}
	</div>
</template>

var barbiche = Barbiche();
var frag = barbiche('test').merge({
	customClass: "my-class",
	"items": [
		{species: "hen", name: "Elsa", show: true},
		{species: "cat", name: "Jacynthe", show: false},
		{species: null, name: "Zaza", show: true}
	],
	item: ["hen", "cat", "dog", "spider"],
	some_html: "<div><p>This is...</p><p>...some HTML.</p></div>",
	my_replace: function(str) {return str.replace(/o/g, "O");},
	attrValue: "lunchroom"
});

The returned document fragment can then be inserted anywhere you want. It contains:

<div class="my-class">
	<div>Jacynthe</div>
	<ul attr-name="lunchrOOm">
		<li class="hen first">Elsa (index: 0)</li>
		<li class="unknown">Zaza (index: 2)</li>
	</ul>
	<span>HEN, CAT, DOG, SPIDER</span>
	<div><p>This is...</p><p>...some HTML.</p></div>
</div>

Browser support

Barbiche requires support of <template> element and basic support of element.classList API. Here is the support table:

	Native (v2 & v3)	Polyfilled (v2)	Polyfilled (v3)
Chrome	≥26	≥15	≥26
Firefox	≥22	≥22	≥22
IE/Edge	No support	≥9	≥11
Opera	≥15	≥11.6	≥15
Safari	≥9	≥6.2	≥6.2

Polyfills, once minified and gzipped, weight an additionnal 2KB.