Leitfaden zur Verwendung des JavaScript Lightweight Template Engine Juicer_Javascript-Kenntnisse

Anwendung

Kompilieren Sie die Vorlage und rendern Sie das Ergebnis sofort basierend auf den Daten

juicer(tpl, data);

Kompilieren Sie die Vorlage nur, ohne sie zu rendern, und 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 complied_tpl = juicer(tpl);
 var html = complied_tpl.render(data);

Benutzerdefinierte Funktion (Objekt) registrieren/Registrierung aufheben

juicer.register(‘function_name', function);
juicer.unregister(‘function_name');

Standardparameterkonfiguration

 {
   cache: true [false];
   script: true [false];
   error handling: true [false];
   detection: true [false];
 }

Ändern Sie die Standardkonfiguration und ändern Sie sie Element für Element

 juicer.set('cache', false);

Standardkonfiguration und Stapeländerung ändern

 juicer.set({
      'script': false,
      'cache': false
 })

Juicer speichert die kompilierte Vorlage standardmäßig zwischen, um den Zeitaufwand für die wiederholte Kompilierung zu vermeiden, wenn dieselbe Vorlage mehrmals gerendert wird. Wenn kein besonderer Bedarf besteht, wird dringend davon abgeraten, den Cache in den Standardparametern zu deaktivieren. Andernfalls führt die Ungültigmachung des Juicer-Cache zu einer Leistungseinbuße.

Grammatik

* ${Variable} 

- Verwenden Sie ${}, um Variablen auszugeben, wobei _ ein Verweis auf die Datenquelle (${_}) ist. Unterstützt die Verwendung benutzerdefinierter Funktionen.

${name}
${name|function}
${name|function, arg1, arg2} 

 var = links: [{href: 'http://juicer.name', alt: 'Juicer'},
            {href: 'http://benben.cc', alt: 'Benben'},
            {href: 'http://ued.taobao.com', alt: 'Taobao UED'}  
           ]};
 var tpl = [ '{@each links as item}',
         '${item|links_build} <br />',  
         '{@/each}'].join('');
 var links = function(data) {    
 　　return '<a href="' + data.href + '" alt="' + data.alt + '" />';
};
juicer.register('links_build', links); //注册自定义函数
juicer(tpl, json);

* Flucht/Flucht vermeiden

– ${Variable} maskiert seinen Inhalt vor der Ausgabe. Wenn Sie nicht möchten, dass das Ausgabeergebnis maskiert wird, können Sie $${Variable} verwenden, um diese Situation zu vermeiden.

 var json = {
    value: '<strong>juicer</strong>'
 };
 var escape_tpl='${value}';
 var unescape_tpl='$${value}';
 juicer(escape_tpl, json); //输出 '<strong>juicer</strong>'
 juicer(unescape_tpl, json); //输出 '<strong>juicer</strong>' 

* Schleife durch {@each} ... {@/each}   

– Durchlaufen des Arrays, ${index}aktueller Index

 {@each list as item, index}
     ${item.prop}
     ${index} //当前索引
 {@/each}

*Richter{@if} ... {@else if} ... {@else} ... {@ /if}

*Kommentare {# Inhalt kommentieren

{# Hier ist der Kommentarinhalt *Hilfsschleife

{@each
i in range(m, n)}

 {@each i in range(5, 10)}
     ${i}; //输出 5;6;7;8;9;
 {@/each}

* Verschachtelung von Untervorlagen

{@include

tpl, data} – Zusätzlich zur Einführung von in den Daten angegebenen Untervorlagen kann die Untervorlagenverschachtelung auch den im „script“-Tag geschriebenen Vorlagencode verwenden, indem die Zeichenfolge „#id“ angegeben wird.

– HTML-Code:

<script type="text/juicer" id="subTpl">
   I'm sub content, ${name}
</script>

- Javascript-Code:

var tpl = 'Hi, {@include "#subTpl", subData}, End.';

juicer(tpl, {
subData: {
name: 'juicer'
}
});

//输出 Hi, I'm sub content, juicer, End.
 //或者通过数据引入子模板，下述代码也将会有相同的渲染结果：
 
 var tpl = 'Hi, {@include subTpl, subData}, End.';
 
 juicer(tpl, {
     subTpl: "I'm 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 />
           {@/each}
         {@/if}
       </li>
     {@/each}
   </ul>
 </script>

Javascript-Code: