Handlebars

HandlebarsMet de Handlebars lichtgewicht javascript library kun je op eenvoudige wijze html templates samenstellen. Het enige dat je hoeft te doen is een (javascript) object of dataset aan het template mee te geven en Handlebars regelt verder de verwerking met de opmaak.

Waarom Handlebars?

Het maakt de markup heel overzichtelijk. Templates kunnen op een aparte plek bewaard worden. Als je een minimale hoeveelheid javascript libraries wilt gebruiken en je gebruikt nog geen framework dat al een templating module bevat (zoals bijvoorbeeld Knockout), dan is Handlebars zeker nuttig. Aanpassingen zijn gemakkelijk te maken. Je kunt een scheiding tussen code (javascript) en opmaak (html en css) maken. Handlebars heeft ook de mogelijkheid om nog enige snelheid te bewaren door de templates te compileren voor gebruik.

Hoe gebruik je handlebars?

Je definieert een html template in een javascript scriptblock:
<script id="templateid" type="text/x-handlebars-template">
    <h1>{{title}}</h1>
   {{#each persons}}
      <p>{{name}}</p>
  {{/each}}
</script>

Je plaatst de te tonen property namen van de dataset in het template ({{title}}). En je gebruikt misschien nog een expression (loop, condition, etc).

Je koppelt de data aan het template en toont het resultaat in een placeholder.
var source = $("#templateid").html();
var template = Handlebars.compile(source);
var context = {title: "de titel", persons: [{name: "jan"},{name: "piet"},{name: "klaas"}] };
var html = template(context);
$("#destination").html(html);

Handlebars heeft maar een beperkte set aan expressions en operators. Mocht je toch een ingewikkeldere vergelijking willen doen, dan kun je Handlebars uitbreiden met zogenoemde "Helpers"!

Meer info en API:

Kijk hier voor meer informatie en API: Handlebars.