CMS - Workbench | DE


Templating and Coding for CMS (WordPress, Bludit, Automad, Typesetter, GetSimple, Pico and more)


Handlebars Template

Mit Handlebars bauen Sie kleine JS Template-Engines auf. Dieser Beitrag zeigt ein kurzes Beispiel.

Handlebars ist eine kostenlose JavaScript Bibliothek die Sie in Ihre HTML-Dokumente einbinden können, um eigene Templates zu erzeugen. Handlebars nutzt dazu einen Trick... es verlagert die Templates in HTML-Tags die zur Laufzeit des Browsers nicht übersetzt werden und zwar in den Script-Tag. Der Inhalt des Script-Tags wird daher vom Browser nicht angezeigt, sondern erst durch das spätere JavaScript ausgewertet.

index.html

Das Beispiel unten zeigt eine einfache Konstruktionsweise eines solchen (inline)Templates in der HTML-Datei index.html. Die Templatedefinition (hier Bootstrap) wird vom Browser zunächst übergangen und nicht angezeigt.

<!DOCTYPE html>
<html>
  <head>
       <meta charset="utf-8">
        <meta name="viewport"    content="width=device-width, initial-scale=1">
        <meta name="author"      content="Oliver Lohse">
        <link rel="stylesheet" href="style/style.css" type="text/css">
    </head>
<body>
 
<div id="content"></div>
 
<script id="template-default" type="text/x-handlebars-template">
    <div class="jumbotron jumbotron-fluid">
    <div class="container">
    <h1 class="display-4"> {{headPrimary}}  </h1>
    <p class="lead"> {{headSecondary}} </p>
      </div>
    </div>
   
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                {{center}}
            </div>
            <div class="col-sm-3">
                {{{side}}}
            </div>
        </div>
        {{bottom}}
        </div>
    </div>
</script>

<script language="JavaScript" src="handlebars-v4.7.6.js" type="text/javascript"></script>
<script language="JavaScript" src="data.js" type="text/javascript"></script>
<script language="JavaScript" src="render.js" type="text/javascript"></script>
 
</body>
</html>

Erst der Aufruf der render.js läd den Inhalt von template-default, ersetzt die Templatevariablen durch den Inhalt der data.js und fügt das Ergebnis in content ein.

data.js

Die data.js nimmt den eigentlichen Content, also den Text auf. Der Inhalt ist im Json-Format erzeugt und hat den folgenden Inhalt:

var data = {
headPrimary: "Titel (Handlebars)",      
    headSecondary: "Ein Prototyp mit Handlebars.JS",     
   center: "Ein Templateparser mit der freien JS-Engine Handlebars.",     
   side: "Das Seitenmenue",     
   bottom: "(c) by O.Lohse - 2020"}

Im wesentlichen wird dort die Variable data definiert und vom render.js ausgewertet. Die Templatevariablen müssen dann natürlich exakt den Json-Attributen entsprechen, um das Matching durchzuführen.

render.js

Der Renderer ist übersichtlich gehalten und kann zentralisiert ausgelagert werden.

var template     = Handlebars.compile(document.getElementById("template-default").innerHTML);    
var templateData = template(data);
document.getElementById('content').innerHTML += templateData;

Das obige Beispiel ist allerdings nur eine von vielem Konstruktionsmöglichkeiten einer Template-Engine mit Handlebars - für mich persönlich die derzeit sinnvollste. Bitte bedenken Sie auch, das Sie die JS-Bibliothek von dort herunterladen müssen, damit das Beispiel oben funktioniert.

17.11.2020 • Handlebars • Template-Engine Handlebars JS


Oliver Lohse - Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Sprachen bzw. Markup-Dialekten, z.B.: Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 22 Jahren arbeite ich in einem grossen Softwareunternehmen in Niedersachsen. Sie sehen auf dieser Seite mein eigens für Bludit CMS entwickeltes Theme "Reaktor-Block IV".

Kontakt: Κontakt@Οliver-Lohse.de


Empfehlungen:



JS-Mini-CMS

Der große Vorteil dieses JS Template-Parsers ist, er benötigt keinen Server oder eine Datenbank und läuft auf allen Endgeräten mit Web-Browser.

mehr...

Kleinste PHP Template-Engine

Wenn Sie eine extrem kleine Template-Engine benötigen, dann finden Sie in diesem Beitrag das Coding.

mehr...

RegExp

So einfach bauen Sie eine RegularExpression in JavaScript auf.

mehr...

SimpleJS

SimpleJS ist eine leicht beherrschbare Template-Engine ohne externe Abhängigkeiten, auf Basis des einfach beherrschbaren JavaScripts.

mehr...



CMS Workbench

Hilfreiche Tipps, Tricks, Codings und Codeschnipsel, die im Rahmen der Entwicklung, Weiterentwicklung und Templatings zum Thema CMS immer wieder benötigt werden - aus verschiedenen Sprachdialekten wie Java, JavaScript, PHP, Python und anderen.