Wie man benutzt
Kompilieren Sie die Vorlage und rendern Sie die Ergebnisse sofort basierend auf den Daten
Juicer (TPL, Daten);
Kompilieren Sie die Vorlage nur und rendern Sie sie noch nicht, geben Sie eine wiederverwendbare kompilierte Funktion zurück.
var compiled_tpl = Juicer (tpl);
Rendern Sie die zuvor kompilierte Vorlage basierend auf den angegebenen Daten
var compiled_tpl = Juicer (tpl); var html = compiled_tpl.render (Daten);
Benutzerdefinierte Funktionen registrieren/anmelden (Objekt)
Juicer.register ('function_name', function); Juicer.unregister ('function_name');Standardparameterkonfiguration
{cache: true [false]; Skript: wahr [Falsch]; Fehlerhandhabung: True [False]; Erkennung: wahr [Falsch]; }Ändern Sie die Standardkonfiguration, ändern Sie sie nacheinander
Juicer.set ('Cache', False);Ändern Sie die Standardkonfiguration und die Batch -Änderung
suicer.set ({'script': false, 'cache': false})Der Entsorgungssaft wird standardmäßig kompilierte Vorlagen zwischen den kompilierten Vorlagen ausgestattet, wodurch die Zeit vermieden wird, die wiederholt dieselbe Vorlage erfasst, wenn Daten mehrmals gerendert werden. Wenn es keine besonderen Bedürfnisse gibt, wird nicht empfohlen, den Cache in den Standardparametern auszuschalten. Dies führt dazu, dass der Juicer -Cache ungültig wird und die Leistung verringert.
Grammatik
* $ {variable}
- Verwenden Sie $ {} Ausgangsvariable, wobei _ ein Verweis auf die Datenquelle ist ($ {_}). Unterstützt die Verwendung von benutzerdefinierten Funktionen.
$ {Name} $ {Name | Funktion} $ {Name | Funktion, arg1, arg2} var = links: [{href: 'http://juicer.name', Alt: 'Juicer'}, {href: 'http://benben.cc', Alt: 'Benben'}, {href: 'http:/ued.taoba.com'; var tpl = ['{@each links als item}', '$ {item | links_build} <br />', '{@ /jeder}']. Join (''); var links = function (data) {return '<a href = "' + data.href + '" />' '; // benutzerdefinierte Funktionssaft registrieren (TPL, JSON);* Flucht/Vermeiden Sie die Flucht
- $ {variable} entgeht dem Inhalt vor der Ausgabe. Wenn Sie nicht möchten, dass die Ausgabe entkommen wird, können Sie $$ {Variable} verwenden, um dies zu vermeiden.
var json = {value: '<strong> Juicer </strong>'}; var Escape_tpl = '$ {value}'; var unescape_tpl = '$$ {value}'; Juicer (Escape_TPL, JSON); // Ausgabe '<strong> Juicer </strong>' Juicer (Unscape_tpl, JSON); // Ausgabe '<strong> Juicer </strong>'*Schleifen Sie durch {@each} ... {@/jeder}
- Über das Array iterieren, $ {index} aktueller Index
oder
*Richter {@if} ... {@else if} ... {@else} ... {@/wenn}
*Kommentar {# Kommentarinhalt}
{# Hier ist der Kommentarinhalt}
*Hilfsschleife {@each i in Bereich (m, n)}}
{@each i in Bereich (5, 10)} $ {i}; // Ausgabe 5; 6; 7; 8; 9; {@/jede}*Sub-Template-Nesting {@include tpl, Data}
-Sub-Template-Verschachtelung Zusätzlich zur Einführung in den Daten eingeführten Sub-Templates kann auch der im "Skript" -T-Tag geschriebene Unter-Template-Code verwendet werden, indem die Zeichenfolge `#id` angegeben wird.
- HTML -Code:
<script type = "text/saft" id = "subtpl"> Ich bin sub content, $ {name} </script>- JavaScript -Code:
var tpl = 'hi, {@include "#subtpl", subdata}, Ende.'; Juicer (tpl, {subdata: {name: 'Juicer'}}); // öffnen hi, ich bin sub content, suicer, end. // ODER SUB-TEMPLATES IHRED DATEN FEEDEN DER GESECHEN CODE hat auch das gleiche Rendering-Ergebnis: var tpl = 'hi, {@include subtpl, subdata}, Ende.'; Juicer (TPL, {subtpl: "Ich bin sub content, $ {name}", subdata: {name: 'Juicer'}});Ein vollständiges Beispiel
HTML -Code:
<script id="tpl" type="text/template"> <ul> {@each list as it,index} <li>${it.name} (index: ${index})</li> {@/each} {@each blah as it} <li> num: ${it.num} <br /> {@if it.num==3} {@each it.inner as it2} $ {it2.time} <br/> {@/jeder} {@/if} </li> {@/jeder} </ul> </script>JavaScript -Code:
var data = { list: [ {name:' guokai', show: true}, {name:' benben', show: false}, {name:' dierbaby', show: true} ], blah: [ {num: 1}, {num: 2}, {num: 3, inner:[ {'time': '15:00'}, {'time': '16: 00 '}, {' time ': '17: 00'}, {'time': '18: 00 '}]}, {num: 4}]}; var tpl = document.getElementById ('tpl'). Innerhtml; var html = safter (tpl, data);