Logo

Democode und Beispieltemplate für Handlebars in JavaScript


Dieser Beitrag zeigt ein einfaches Demo Template für die JavaScript basierte Template Engine Handlebars. Dieses Template ist sogar offline funktionsfähig.

Sabrent ext.Festplattengehäuse

Sabrent ext.Festplattengehäuse - HIGH SPEED Das SABRENT externe Festplatte Gehäuse unterstützt UASP, deshalb kann das Gehäuse Ihnen eine außergewöhlich hohe Übertragungsrate von bis zu 5 Gbps für den Datentransfer bieten! Damit lassen sich HD Filme, Music und data in nur Sekunden transferieren. (Abwärtskompatibel mit USB 2.0 oder 1.1) Hinweis

kaufen...
Automad Bludit Coast GetSimple GRAV Handlebars Java PHP Pico Smarty Templating Typemill WonderCMS WordPress yamlCMS

Ein Template mit Handlebars.JS

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 Handlebars.JS 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 in diesem Handlebars.JS Template 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 Handlebars Template 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 Handlebars JS-Bibliothek von dort herunterladen müssen, damit das Beispiel oben funktioniert.

Im übrigen kann man sich natürlich über den Sinn und Unsinn von Template-Engines streiten, zumal ein neuer Dialekt erlernt werden muss und auch die Performance durchaus leidet. Besonders im Hinblick auf eine JavaScript-Template Engine in dieser Konstruktionsweise, bezweifle ich sehr stark, das diese üppigen Einsatz finden wird. Für solche Fälle würde ich das bereits templatefähige PHP klar vorziehen - zumal PHP vom Browser des Lesers nicht blockiert werden kann wie es bei JavaScript der Fall ist.

Passend:


Anleser im Bludit CMS Template DEVTHEME einstellen

Stellen Sie den Anleser des Beitrags im Bludit Template DEVTHEME individuell ein, indem Sie die Anzahl anzuzeigender Zeichen mit einem PHP Befehl begrenzen.

Das Feld TEMPLATE in den Beitragseinstellungen des CMS Bludit

So können Sie das freie Feld TEMPLATE in den Beitragseinstellungen verwenden. Fragen Sie es mit dem folgenden Coding des Beitrags ab und steuern das Templating

Steuern Sie die Art des anzuzeigenden Bludit Templates

Mit diesem Coding können Sie verschiedene Templates starten, jenachdem ob der Leser eine Seite, Kategorie, home oder Tag wählt. Bludit kennt vier Seiten-Typen

Templating, funktionfähiges Template für das CMS GetSimple

Teil 1 - Der Einstieg in das Templating mit dem freien CMS GetSimple - der Name ist Programm, denn dieses CMS ist klar und leicht beherrschbar strukturiert.

Templating 3 ein einfaches Layout für das CMS GetSimple anlegen

Teil 3 - Ein GetSimple Template erstellen. In Verbindung mit dem freien und beliebten CSS-Framework Bootstrap eine leichte Sache auf dem Weg zum eigenen Blog.

Welchen Sinn machen JavaScript Template Engines heutzutage?

Man darf sich durchaus fragen welchen Sinn Template-Engines in JavaScript machen, da diejenigen User zunehmen, die das JavaScript im Browser deaktivieren.

Ein Heredoc-Parser und Mini CMS mit PHP zum Templating erstellt

Dieser Beitrag zeigt einen Heredoc Template Parser und mini CMS, erstellt in PHP, unter Nutzung der Heredoc-Syntax. Content, Template und Parser in einer Datei.

Die kleinste PHP Template-Engine und kleinstes CMS der Welt

Das ist die kleinste PHP Template-Engine, bzw. das kleinste PHP-CMS der Welt, erstellt mit der Programmiersprache PHP und 7 Zeilen Code.

Standardisiertes PHP Formular Designpattern entwickeln

Die Formularverarbeitung durch PHP ist der beliebteste Standard im Web. Nutzen Sie ein intelligentes Design, können Sie sich viel Arbeit und Stress ersparen.

Kleinster PHP Template Parser mit Heredoc Syntax der Welt

Das ist die kleinste PHP-Template-Engine bzw der kleinste Template-Parser in PHP, der mit Heredoc Syntax arbeitet. Die Heredoc Syntax ist ideal für kleine Prototypen.

Affiliate Links mit YAML und TWIG für Pico CMS ohne Plugin

Zufällige Affiliate-Links auch ohne externe Plugins mit Hilfe von YAML und der Templatesprache Twig in Pico CMS realisieren, das ist sogar wirklich sehr einfach.

Affiliate Links mit YAML und TWIG für Pico CMS ohne Plugin

Zufällige Affiliate-Links auch ohne externe Plugins mit Hilfe von YAML und der Templatesprache Twig in Pico CMS realisieren, das ist sogar wirklich sehr einfach.

Teil 7 eigene Templateabfragen in Smarty Template Engine

Möchten Sie in Smarty Templates Bedingungen abfragen, dann können Sie den IF Befehl des Smarty Parsers nutzen, um die Ausgabe des Templates zu steuern.

Mit einem HTML-Template beginnen - Templating Tipps

Erarbeiten Sie als Prototypen ein reines HTML-Template das Ihnen zusagt. HTML-Templates sind schneller entwickelt und müssen weniger Restriktionen einhalten.

Die richtige Wahl der Templatesprache Templating Tipps

In welcher Schreibweise sollten Sie CMS Templates erstellen? Gemischt HTML und PHP oder doch lieber waschechtes PHP? Dieser Beitrag erleichtert den Einstieg.

Werden Sie Template-Entwickler so starten Sie Templating Tipps

Werden Sie zum Template-Entwickler und beginnen mit leichten Arbeiten, portieren Sie Ihre Templates später in die großen CMS wie WordPress, Bludit oder Joomla

Ein neues Datenbanfeld für WonderCMS in der json-DB anlegen

Mit diesem Trick legen Sie neue Datenbank-Felder in der JSON-Datenbank des WonderCMS vollkommen automatisiert an - mit nur einer Codezeile im WonderCMS Theme.

th3_alpha.php im WordPress CMS Log und die Beudeutung

Das WordPress Plugin steht im Verdacht Malware zu enthalten. In unterschiedlichen Foren im Netzt sind dazu widersprüchliche Infos zu finden - es ist abzuwarten

Ein eigenes Theme für Bludit CMS leicht entwickeln

So steuern Sie die Templatevorgabe in Beiträgen mit dem CMS Bludit. Sie können den Tamplatenamen bei der Erstellung von Beiträgen im Backend angeben.

Den Footer im Template DEVTHEME des Bludit CMS anpassen

Brandings der Entwickler sind natürlich eine gute Sache, jedoch dürfen sie auch abgestellt werden. Wie das für das Bludit Theme DEVTHEME geht, lesen Sie hier

Im Theme DEVTHEME latest Post in Bludit CMS entfernen

Im Bludit Theme DEVTHEME wird das Label "latest Post" angezeigt. Manchmal kann das störend sein. Entfernen Sie das Label doch einfach in der home.php

Erstellen Sie einen Theme einfachen Umschalter für Bludit

Wenn Sie Bludit-Themes und Templates entwickeln dann können Sie dem Leser die Möglichket geben das Theme live umzuschalten für den ersten Eindruck.

Themengebundene Icons und Logos sicher in Bludit Themes laden

Laden Sie Themengebundene Logos und Bilder mit Hilfe der Helper Klasse Theme oder der Konstante DOMAIN_THEME des CMS Bludits. Das ist die bevorzugte Variante.

YAML Syntax in Pico CMS in der Theme Config auslesen

Die YAML Syntax anhand einer Liste erläutert, die beispielsweise Affiliate oder CTA Links aufnimmt und die vom Twig-Template ausgelesen werden können.

Styleguide für Webseiten - das sind die Standards

Möchten Sie Themes, Layouts und Designs erstellen die auf hohe Akzeptanz beim Besucher stoßen, dann sollten Sie sich zuvor diesen Styleguide durchlesen.

Ein Bludit Plugin installieren ganz einfach und schnell

Ein wenigen Schritten installieren Sie ein Bludit Plugin aus dem Internet auf Ihrer eigenen Webseite. Der Beitrag zeigt wie das geht und was benötigt wird

PHP mit JavaScript aufrufen

Möchten Sie einen Log-Mechanismus entwickeln den Sie leicht in jedes PICO Template einbinden können, dann ist JavaScript und PHP ideal dafür.

PHP mit JavaScript aufrufen

Möchten Sie einen Log-Mechanismus entwickeln den Sie leicht in jedes PICO Template einbinden können, dann ist JavaScript und PHP ideal dafür.

TinyMCE läuft nicht im Standardmode im Bludit CMS

Der TinyMCE läuft nicht im Standardmode, statt dessen ist der MarkDown Parser aktiviert. Diese Meldung erhalten Sie oft wenn JavaScripte in Plugins stören.

Die WordPress Seite Ihres CMS ist nicht erreichbar?

Ist Ihre WordPress Webseite nach dem letzten Update nicht mehr erreichbar, dann könnte Ihnen dieser Beitrag schnell helfen um das Problem schnell zu beheben


Meta: Instagram CMSWorkbench.de GIMP-Handbuch.de Kontakt Impressum Datenschutz