Handlebars

by Stefan Wetter

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<h2>Handlebars</h2>
<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
      Anfang--{{padStringL ReNr 8 '_'}};{{burgPlusMinus Betrag}}{{padStringL (padStringL (burgZahl Betrag) 6 0) 8 '_'}};{{KredNr}};{{padStringR KredName 20 '_'}}--Ende
    </div>
</script>

CSS

.entry {
  font-family: courier, courier new, serif;
}

JavaScript

Handlebars.registerHelper('padStringL', function(str, len, chr) {
  return (Array(len).join(chr) + str).slice(-1 * len);
});
Handlebars.registerHelper('padStringR', function(str, len, chr) {
  return (str + Array(len).join(chr)).substring(0, len);
});
Handlebars.registerHelper('burgZahl', function(num) {
  return Math.abs(Math.round(num * 100));
});
Handlebars.registerHelper('burgPlusMinus', function(num) {
  if (num > 0) return "+";
  return "-";
});

var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {
  ReNr: "12345",
  Betrag: 133.1,
  KredNr: "K1234",
  KredName: "Lichtenzeichen"
}
var output = template(context);
$("body").append(output);
var context = {
  ReNr: "55gBBB",
  Betrag: -11.55555,
  KredNr: "K1235",
  KredName: "Kindergarten Deutschland GmbH"
}
var output = template(context);
$("body").append(output);