mustache.js client side templates

Mustache.js logoEr bestaan veel verschillende templating systems. Allemaal bedoeld om weergaves makkelijker te maken. Maar meestal vinden deze plaats op de server. Bedoelt om data te scheiden van weergaven en daarbij de weergaven simpel te houden. Maar in de afgelopen jaren is de behoefte naar web apps gestegen. Web apps die steeds complexer en sneller worden. Die zich zelf updaten met nieuwe informatie als  iemand anders iets veranderd.  Als ontwikkelaar wil je dan nog steeds data en weergaven gescheiden houden. Om dit te ondersteunen zijn er client side templating system zo als mustache.js gekomen.

We call it “logic-less” because there are no if statements, else clauses, or for loops. Instead there are only tags. Some tags are replaced with a value, some nothing, and others a series of values.

Mustache  is een “logic-less” template engine, gericht op simpele weergaven. Op deze manier proberen ze te benadrukken dat het alleen de template is en niet data of logica.  Hiermee onderscheiden ze zich duidelijk van de concurrent handlebars.js

Stel je bent een dashboard aan het maken dat de laatste tien tweets wil laten zien. Elke minuut controleert je script of er nieuwe tweeds zijn. Om te voorkomen dat je deze dan met veel lastige javascript moet gaan opmaken gebruik je mustache.  De template voor één twee zou zijn:

Var template = '<li><a href="{{link}}">{{title}}</a></li>';

Maar we wilde meerdere tweets tonen:

Var template = '
<ul>
{{#tweets}}
	<li><a href="{{link}}">{{title}}</a></li>
{{/tweets}}
</ul>';

Maar de data ontbreekt nu nog. In het voorbeeld hier onder word eerste de temaplte gebouwd daarna de data en als laatste word door mustache alles samen gevoegd.

 
Var template = '
<ul>
{{#tweets}}
	<li><a href="{{link}}">{{title}}</a></li>
{{/tweets}}
</ul>'; 
Var data = { "tweets": [ 
	{"link": "http://twitter.com/", "title": "tweet nummer 1" }, 
	{"link": "http://twitter.com/", "title": "tweet nummer 2" }, 
	{"link": "http://twitter.com/", "title": "tweet nummer 3" } 
] }; 
var output = Mustache.render(template, data); 

Met als resultaat

 
<ul>
	<li><a href="http://twitter.com/">tweet nummer 1</a></li>
	<li><a href="http://twitter.com/">tweet nummer 2</a></li>
	<li><a href="http://twitter.com/">tweet nummer 3</a></li>
</ul>

Met Mustache is het dus heel eenvoudig om en set aan data om te bouwen naar HTML. Vooral in web apps worden vaak elementen client side nog opgebouwd, Mustache kan hier bij assisteren.