Wie lade ich Vorlagen mit Hogan.JS aus einer externen Datei?

8

Ich benutze Hogan.JS als JavaScript Templating-Bibliothek. Es soll JavaScript-Vorlagen von externen Dateien laden. Man kann wahrscheinlich mehrere Vorlagen in einer externen JavaScript-Datei auslagern.

Weiß jemand, wie man das macht?

Ich habe das folgende Codebeispiel:

%Vor%

Mit den IDs kann ich die Templates ansprechen, brauche aber immer ein eigenes Inline-Script. : - (

Wie funktioniert das mit externen Dateien?

    
Benny Neugebauer 30.01.2013, 10:20
quelle

3 Antworten

28

Sie haben zwei Möglichkeiten, externe Vorlagen zu laden:

  1. Vorkompilieren der Vorlagen (die beste Eigenschaft von Hogan.js IMHO) oder
  2. Verwenden Sie require.js Text-Plugin , um den Template-String
  3. zu laden

Leider ist die Dokumentation zum Vorkompilieren von Hogan.js-Vorlagen nicht vorhanden. Wenn Sie eine Kopie des Github-Repo haben, dann befindet sich im bin -Verzeichnis ein Skript namens hulk , das funktioniert die Arbeit. Es erfordert nodejs zusammen mit einigen npm Modulen (zB nopt und mkdirp ) installiert.

Sobald Sie nodejs und diese Module installiert haben, erhalten Sie eine Vorlagendatei Test.hogan:

%Vor%

Sie können das Skript mit dem folgenden Befehl vorkompilieren:

%Vor%

Daraus ergibt sich folgender Text:

%Vor%

Speichern Sie dies in einer Datei namens templates.js

Nun würden Sie auf Ihrer HTML-Seite diese templates.js -Datei laden und ein globales Objekt mit dem Namen templates erstellen, wobei die kompilierte Template-Funktion im Schlüssel "Test" ist. Sie können auch die Datei hogan.js weglassen, da dies der Compiler ist (und Ihre Vorlagen sind jetzt vorkompiliert) und nur die template.js -Datei, die in der Distribution enthalten ist, einschließen.

%Vor%

Hinweis: Ich hatte einige Probleme mit dem aktuellen master Zweig des Github Repos, da es eine Vorlage generiert hat, die einen anderen Konstruktor als den in der Template-Version 2.0.0 verwendeten verwendet. Wenn Sie hulk verwenden, verwenden Sie unbedingt die Datei template.js , die sich im Ordner lib befindet.

Alternativ können Sie require.js und das Text-Plugin verwenden. Laden Sie sie herunter und speichern Sie sie in Ihrem js -Ordner. Dann müssen Sie eine require -Anweisung hinzufügen, um den Vorlagentext zu laden:

%Vor%     
Phuong LeCong 07.02.2013, 23:53
quelle
5

Es gibt einen anderen Weg, der sehr gut funktioniert, wenn Sie keinen Knoten verwenden oder wenn Sie sich auf require.js verlassen wollen.

Sie können jQuery $ .get einfach verwenden, um den Pfad zur Vorlagendatei zu erhalten. Ein Beispiel sieht so aus:

%Vor%

Die Vorlage kann einfach eine .html-Datei sein (ich benutze einfach .hogan) und der gesamte HTML-Code in der Vorlage sollte in ein Skript-Tag mit einer eindeutigen ID eingebettet werden, damit Sie die ID hier bekommen können. Datum kommt von on ('typeahead: selected'), aber das ist irrelevant. Ich dachte nur, ich sollte es erklären, da es im Code ohne andere Referenzen ist.

    
Alex 18.08.2013 19:51
quelle
0

Ich hatte die gleiche Frage und endete mit einer anderen Art, Dinge zu tun als Phuong, ich dachte, ich würde es teilen.

Serverseitig kompiliere ich die Vorlage und speichere sie mit dem folgenden Skript in eine Datei:

%Vor%

Und Client-Seite, ich tue:

%Vor%

Ich hoffe, es hilft!

    
Louis Ameline 06.06.2014 20:24
quelle