examples.json

[
	{"name":"Basic","template":"<template id=\"basic\">\n\t<div bb-class=\"class\" bb-attr=\"attribute.value: attribute.name\">{{text}}</div>\n</template>","js":"var barbiche = Barbiche();\ntarget.appendChild(barbiche('basic').merge({\n\tclass: \"barbiche\",\n\tattribute: {name: \"my-attr\", value: \"my-val\"},\n\ttext: \"Hello World!\"\n}));"},

	{"name":"Starter","template":"<template id=\"starter\">\n\t<div bb-alias=\"items[1].name: 'name'\" bb-class=\"customClass\">\n\t\t<div>{{name}}</div>\n\t\t<ul bb-attr=\"my_replace(attrValue): 'attr-name'\">\n\t\t\t<template bb-repeat=\"items: 'item'\">\n\t\t\t\t<li bb-if=\"item.show\" bb-class=\"[item.species || 'unknown', (_item_ == 0): 'first']\">\n\t\t\t\t{{item.name}} (index: {{_item_}})\n\t\t\t\t</li>\n\t\t\t</template>\n\t\t</ul>\n\t\t<span>{{item.join(', ').toUpperCase()}}</span>\n\t\t{{{some_html}}}\n\t</div>\n</template>","js":"var barbiche = Barbiche();\ntarget.appendChild(barbiche('starter').merge({\n\tcustomClass: \"my-class\",\n\t\"items\": [\n\t\t{species: \"hen\", name: \"Elsa\", show: true},\n\t\t{species: \"cat\", name: \"Jacynthe\", show: false},\n\t\t{species: null, name: \"Zaza\", show: true}\n\t],\n\titem: [\"hen\", \"cat\", \"dog\", \"spider\"],\n\tsome_html: \"<div><p>This is...</p><p>...some HTML.</p></div>\",\n\tmy_replace: function(str) {return str.replace(/o/g, \"O\");},\n\tattrValue: \"lunchroom\"\n}));"},

	{"name":"Conditions","template":"<template id=\"conditions\">\n\t<!--conditions-->\n\t<div name=\"first\">\n\t\t<span bb-if=\"items[0].show\">{{items[0].name}}</span>\n\t\t<span bb-if=\"items[1].show\">{{items[1].name}}</span>\n\t</div>\n\t<div name=\"second\"> \n\t\t<span bb-if=\"items[0].show\">{{items[0].name}}</span>\n\t\t<span bb-else>Item not shown</span>\n\t</div>\n\t<div name=\"third\"> \n\t\t<span bb-if=\"items[1].show\">{{items[1].name}}</span>\n\t\t<span bb-else>Item not shown</span>\n\t</div>\n</template>\n\n<template id=\"nested-conditions\">\n\t<!--nested conditions-->\n\t<div bb-if=\"bool1\">a</div>\n\t<template bb-else>\n\t\t<div bb-if=\"bool2\">b</div>\n\t\t<div bb-else>c</div>\n\t</template>\n</template>","js":"var barbiche = Barbiche();\ntarget.appendChild(barbiche('conditions').merge({\n\t\"items\": [\n\t\t{name: \"Elsa\", show: true},\n\t\t{name: \"Jacynthe\", show: false}\n\t]\n}));\ntarget.appendChild(barbiche('nested-conditions').merge({\n\tbool1: false,\n\tbool2: false\n}));"},

	{"name":"Aliases","template":"<template id=\"aliases\">\n\t<div bb-alias=\"outer.inner.name: 'name'\">\n\t\t<span>{{name}}</span>\n\t</div>\n\t<div bb-alias=\"outer.inner: 'inner'\">\n\t\t<span bb-alias=\"inner.name: 'name'\">{{name}}</span>\n\t</div>\n</template>","js":"var barbiche = Barbiche();\nvar obj = {\n\touter: {\n\t\tinner: {\n\t\t\tname: \"Zaza\"\n\t\t}\n\t}\n};\ntarget.appendChild(barbiche('aliases').merge(obj));"},

	{"name":"Text/HTML","template":"<template id=\"text\">\n\t<!--text-->\n\t<div>\n\t\t<span>{{yes}}</span>\n\t\t<span>{{(2 == 1 + 1): again}}</span>\n\t\t<span>{{(1 == 4): no}}</span>\n\t\t<span>{{Math.random() > 0.5: maybe}}</span>\n\t</div>\n</template>\n\n<template id=\"html\">\n\t<!--html-->\n\t<div>\n\t\t<span>{{{some_html}}}</span>\n\t\t<span>{{{some_node()}}}</span>\n\t\t<span>{{some_html}}</span>\n\t</div>\n</template>","js":"var barbiche = Barbiche();\nvar obj = {\n\tyes: \"You see me\",\n\tagain: \"You see me too\",\n\tno: \"You won't see me\",\n\tmaybe: \"Well, maybe...\",\n\tsome_html: \"<div><p>This is...</p><p>...some HTML.</p></div>\",\n\tsome_node: function() {\n\t\tvar elt = document.createElement('p');\n\t\telt.appendChild(document.createTextNode('Some really nice text'));\n\t\treturn elt;\n\t}\n};\ntarget.appendChild(barbiche('text').merge(window, obj));\ntarget.appendChild(barbiche('html').merge(obj));"},

	{"name":"Loops","template":"<template id=\"loop\">\n\t<!--loop-->\n\t<div>\n\t\t<span bb-repeat=\"items: 'item'\">{{item.name}} ({{_item_}})</span>\n\t</div>\n</template>\n\n<template id=\"reverse-loop\">\n\t<!--reverse loop-->\n\t<div>\n\t\t<span bb-repeat=\"items: 'item' --\">{{item.name}} ({{_item_}})</span>\n\t</div>\n</template>\n\n<template id=\"table\">\n\t<!--table-->\n\t<table>\n\t\t<tbody>\n\t\t\t<tr bb-repeat=\"rows: 'row'\">\n\t\t\t\t<td bb-repeat=\"row: 'cell'\">{{cell}}</td>\n\t\t\t</tr>\n\t\t</tbody>\n\t</table>\n</template>\n\n<template id=\"nested-loops\">\n\t<!--nested loops-->\n\t<div>\n\t\t<span bb-repeat=\"[arr1: 'item1', arr2: 'item2']\">{{item1}}{{item2}}</span>\n\t</div>\n</template>","js":"var barbiche = Barbiche();\nvar data = {\n\titems: [\n\t\t{species: \"hen\", name: \"Elsa\", show: true},\n\t\t{species: \"cat\", name: \"Jacynthe\", show: false},\n\t\t{species: null, name: \"Zaza\", show: true}\n\t]\n};\ntarget.appendChild(barbiche('loop').merge(data));\ntarget.appendChild(barbiche('reverse-loop').merge(data));\ntarget.appendChild(barbiche('table').merge({\n\trows: [\n\t\t[\"A1\", \"B1\", \"C1\"],\n\t\t[\"A2\", \"B2\", \"C2\"]\n\t]\n}));\ntarget.appendChild(barbiche('nested-loops').merge({\n\tarr1: [\"A\", \"B\"],\n\tarr2: [1, 2, 3]\n}));"},

	{"name":"Imports","template":"<template id=\"simple-subtemplate\">\n\t<!-- Simple -->\n\t<div>\n\t\t<template bb-import=\"'sub'\"></template>\n\t</div>\n</template>\n\n<template id=\"sub\">\n\t<span>I am a subtemplate!</span>\n</template>\n\n<template id=\"dynamic-subtemplate\">\n\t<!-- Dynamic -->\n\t<div>\n\t\t<template bb-repeat=\"items: 'item'\" bb-import=\"item.sub\"></template>\n\t</div>\n</template>\n\n<template id=\"sub1\">\n\t<span>I am subtemplate1! ({{item.name}})</span>\n</template>\n\n<template id=\"sub2\">\n\t<span>I am subtemplate2! ({{item.name}})</span>\n</template>\n\n<template id=\"data-subtemplate\">\n\t<!-- Data -->\n\t<div>\n\t\t<template bb-import=\"data_sub: 'data-sub'\"></template>\n\t</div>\n</template>\n\n<template id=\"recursive-subtemplate\">\n\t<!-- Recursive -->\n\t<template bb-if=\"children.length\" bb-import=\"'recursive-sub'\"></template>\n</template>\n\n<template id=\"recursive-sub\">\n\t<ul>\n\t\t<li bb-repeat=\"children: 'child'\">{{child.name}}\n\t\t\t<template bb-if=\"child.children\" bb-alias=\"child.children: 'children'\" bb-import=\"'recursive-sub'\"></template>\n\t\t</li>\n\t</ul>\n</template>","js":"var barbiche = Barbiche();\ntarget.appendChild(barbiche('simple-subtemplate').merge());\ntarget.appendChild(barbiche('dynamic-subtemplate').merge({\n\titems: [{name: 'item1', sub: 'sub2'}, {name: 'item2', sub: 'sub1'}]\n}));\ntarget.appendChild(barbiche('data-subtemplate').merge({\n\tname: 'item',\n\tdata_sub: '<span>I am a subtemplate! ({{name}})</span>'\n}));\ntarget.appendChild(barbiche('recursive-subtemplate').merge({\n\tchildren: [\n\t\t{\n\t\t\tname: \"Solomon\",\n\t\t\tchildren: [\n\t\t\t\t{\n\t\t\t\t\tname : \"Lexie\",\n\t\t\t\t\tchildren: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: \"Shavon\",\n\t\t\t\t\t\t\tchildren: [\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\tname : \"Shirleen\"\n\t\t\t\t\t\t\t\t}, {\n\t\t\t\t\t\t\t\t\tname : \"Kathleen\"\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t]\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: \"Travis\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: \"Adele\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: \"Barney\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}, {\n\t\t\t\t\tname : \"Allie\"\n\t\t\t\t}\n\t\t\t]\n\t\t}, {\n\t\t\tname: \"Juliann\",\n\t\t\tchildren: [\n\t\t\t\t{\n\t\t\t\t\tname : \"Guy\"\n\t\t\t\t}, {\n\t\t\t\t\tname : \"Yaeko\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t]\n}));"},

	{"name":"Attributes","template":"<template id=\"attributes\">\n\t<div bb-attr=\"width: 'width'\"></div>\n\t<div bb-attr=\"[width: 'width', height: 'height', diag: 'diag']\"></div>\n\t<div bb-attr=\"value: name\"></div>\n\t<div bb-attr=\"attr\"></div>\n\t<div bb-attr=\"attrList\"></div>\n</template>","js":"var barbiche = Barbiche();\nvar bbObj = barbiche.bbObj;\ntarget.appendChild(barbiche('attributes').merge({\n\twidth: 'full-width',\n\theight: 'half',\n\tdiag: null,\n\tname: 'depth',\n\tvalue: 5,\n\tattr: bbObj('value', 'name'),\n\tattrList: [bbObj('value1', 'name1'), bbObj('value2', 'name2')]\n}));"},

	{"name":"Classes","template":"<template id=\"classes\">\n\t<div class=\"barbichette\" bb-class=\"myClass\"></div>\n\t<div bb-class=\"isCurrentUrl(page1): 'active'\"></div>\n\t<div bb-class=\"[isCurrentUrl(page2): 'active', isCurrentUrl(page1): 'focused']\"></div>\n\t<div bb-class=\"myClasses\"></div>\n\t<div bb-class=\"[page1, 'demo', isCurrentUrl(page1): page2]\"></div>\n</template>","js":"var barbiche = Barbiche();\ntarget.appendChild(barbiche('classes').merge({\n\tmyClass: \"barbiche\",\n\tisCurrentUrl: function(url) {return url == \"home\";},\n\tpage1: \"home\",\n\tpage2: \"doc\",\n\tmyClasses: ['cl1', 'cl2', 'cl3'],\n}));"},

	{"name":"Context","template":"<template id=\"context\">\n\t<!--context-->\n\t<div>\n\t\t<div>{{now().toLocaleString(undefined, options1)}}</div>\n\t\t<div>{{now().toLocaleString(undefined, options2)}}</div>\n\t\t<div bb-attr=\"JSON.stringify(some_JSON): 'data-format'\"></div>\n\t</div>\n</template>\n\n<template id=\"window\">\n\t<!--window-->\n\t<div>\n\t\t<div>{{Math.random()}}</div>\n\t\t<div bb-attr=\"JSON.stringify(some_JSON): 'data-format'\"></div>\n\t</div>\n</template>","js":"var barbiche = Barbiche();\nvar obj = {\n\toptions1: {weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\", hour: \"numeric\", minute: \"numeric\"},\n\toptions2: {weekday: \"long\", year: \"numeric\", month: \"long\", day: \"numeric\"},\n\tsome_JSON: {\"a\": 1, \"b\": {\"c\": 5}}\n};\nvar helpers = {\n\tnow: function(opts) {return new Date();},\n\tJSON: window.JSON\n};\ntarget.appendChild(barbiche('context').merge(helpers, obj));\ntarget.appendChild(barbiche('window').merge(window, obj));"},

	{"name":"Delimiters","template":"<template id=\"custom-delimiters\">\n\t<!--custom delimiters-->\n\t<div>[[text]]</div>\n</template>\n\n<template id=\"escaped-delimiters\">\n\t<!--escaped delimiters-->\n\t<div>\\{\\} \\\\{{text}} \\{\\{plain text\\}\\}</div>\n</template>","js":"var barbiche_bracket = Barbiche({delimiters: ['[', ']']});\ntarget.appendChild(barbiche_bracket('custom-delimiters').merge({\n\t\"text\": \"Hello World!\"\n}));\n\nvar barbiche = Barbiche();\ntarget.appendChild(barbiche('escaped-delimiters').merge({\n\t\"text\": \"Hello World!\"\n}));\n"},

	{"name":"Identifiers","template":"<template id=\"identifiers\">\n\t<div>{{text}}</div>\n\t<div>{{`t-e\\{ \\}x-t`}}</div>\n\t<div>{{`\\u03A9 te\\n\\t \\\\\\`\\{\\{xt`}}</div>\n\t<div bb-attr=\"`\\u03A9 te\\n\\t \\\\\\`{{xt`: 'omega'\"></div>\n</template>","js":"var barbiche = Barbiche();\ntarget.appendChild(barbiche('identifiers').merge({\n\t\"text\": \"Hello Earth!\",\n\t\"t-e{ }x-t\": \"Hello Mars!\",\n\t\"\\u03A9 te\\n\\t \\\\`{{xt\": \"Hello Moon!\"\n}));"},

	{"name":"Inert","template":"<template id=\"inert\">\n\t<template><p>Not inert template element</p></template>\n\t<template bb-alias=\"text: 'str'\" bb-inert bb-class=\"myClass\" bb-attr=\"myId: 'id'\"><p>{{str}}</p></template>\n</template>","js":"var barbiche = Barbiche();\ntarget.appendChild(barbiche('inert').merge({\n\tmyClass: 'lazy',\n\tmyId: 'art-49',\n\ttext: 'Inert template element'\n}));"}
]