index.md

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.