SwDevelop

 Hello Handelbars

 Erstellt am: 28. Juni 2024

Inhalt von <p>

 Hello Handelbars Script


Hierbei hat geholfen:

https://www.alexstrick.com/blog/a-basic-overview-of-how-to-use-handlebars »
https://vahid.blog/post/2021-03-19-how-to-use-handlebars.js-for-templating »

Die einzelnen Schritte

  1. Füge das handlebars.js Javascript von https://handlebarsjs.com/installation/ in den <head> tag ein.
  2. Füge eine selbst erstellte JavaScript Datei, bevor den schließenden </body> tag ein.
    oder füge es in den <head> tag ein, aber hinter dem handlebars.js Skriptaufruf
    Es ist wichtig, dass die eigenen Javascript Datei geladen wird, nachdem die "handlebars.js" eingebunden wurde und auch das DOM vollständig geladen ist, da wir auf vorhandene DOM-Elemente verweisen und diese ergänzen müssen.
  3. Erzeuge ein HTML template innerhalb von <script type="text/x-handlebars"></script> tags.
    z.Bsp.: <script id="template1" type="text/x-handlebars">"Html mit handlebars Variablen"</script>
    Und erzeuge ein DOM Objekt wie <div id="template1area"></div> indem am Ende das Ergebnis aus der Templateverarbeitung eingebettet wird.
  1. Erfasse (fange) das HTML Template aus der HTML Datei als Textstring in einer Variablen:
    let strTemplate1 = document.querySelector("#template1").innerHTML;
  2. Erzeuge eine Funktion die ein Template Objekt instanziiert, unter der Verwendung von Handlebars.compile() aus dem "handlebars.js" Skript und mit dem zuvor erzeugten Textstring:
    let template1Func = Handlebars.compile(strTemplate1);
  3. Erzeuge eine Instanz von dem Template unter der Benutzung der Funktion "template1Func1()" und den entsprechenden Zeichenfolgen. Das Objekt enthält die Werte für die handlebars Variablen, die im Template verwendet wurden und die als Argument an die Funktion "template1Func()" übergeben werden.
    let temp1obj1 = {
      name: "Ein Name",
      date: "08.07.2024"
    };
    let htmlFromTemplateFunc1 = template1Func(temp1obj1);
  4. Integriere die Templateinstanz "htmlFromTemplateFunc1" in das hierfür erzeugt DOM Object, welches sich in der HTML Datei befindet:
    hier: <div id="template1area"></div> mit:
    document.querySelector("#template1area").innerHTML = htmlFromTemplateFunc1;