Wie verwende ich ein Vorlagen-Plug-in in JavaScript?

In diesem Kapitel erfahren Sie, wie Sie das Vorlagen-Plug-in in JavaScript verwenden und wie Sie das Vorlagen-Plug-in verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Plug-in-Einführung: template ist eine leistungsstarke JavaScript-Template-Engine.

Plug-in-Funktionen:

1. Hervorragende Leistung und schnelle Ausführungsgeschwindigkeit (mehr als das 20-fache von Moustache und Tmpl); 2. Unterstützt Laufzeit-Debugging und kann Ausnahmen genau lokalisieren. Die Anweisung, wo sich die Vorlage befindet.

3. Sie bietet eine gute Unterstützung für NodeJS Express 🎜> 5. Es kann im Browser verwendet werden. End-to-End-Implementierung des Ladens von Vorlagen nach Pfad

6. Unterstützt die Vorkompilierung, die Vorlagen in sehr optimierte JS-Dateien konvertieren kann

7. Einführung in Vorlagenanweisungen, keine Präfixe zum Referenzieren von Daten erforderlich, und eine prägnante Version und native Versionen sind verfügbar

8. Unterstützt alle gängigen Browser; 🎜>Erste Schritte (es gibt zwei Syntaxen, in diesem Artikel wird die Einführungssyntax vorgestellt)

1) Die artTemplate-Vorlage muss ein Skript-Tag vom Typ „text/html“ zum Speichern verwenden Vorlage (das Tag ist HTML);

<script type="text/html"></script>

2) Beginnen Sie mit dem Schreiben Ihrer eigenen Vorlage

<script id="model" type="text/html">
     <h1>{{title}}</h1>
     <ul>
         {{each list as value index}}
             <li>{{index+1}}、{{value}}</li>
         {{/each}}
     </ul>
 </script>

3) Verwenden Sie Daten, um die Vorlage zu rendern artTemplate Präzise Syntax-Einführung:

1) Sie müssen vor der Verwendung die prägnante Syntaxversion angeben, zum Beispiel:

var data ={
     title: '热爱的游戏',
     list: ['LOL','王者农药','梦三国','魔兽争霸','其它']
 }; var html = template('model',data); document.getElementById('box').innerHTML = html

2) Ausdruck:

Mit den Symbolen {{ und }} umschlossene Anweisungen sind Vorlagenausdrücke.

3) Ausgabeausdruck: Ausgabe mit Inhaltskodierung: {{ title }}

Ausgabe ohne Kodierung: {{ #title }}

<script src="template.js"></script>

4) Bedingter Ausdruck

// 假如有这样一段数据，title 内出现了标签  var data ={
      title: &#39;<i>热爱的</i>游戏&#39;,
      list: [&#39;LOL&#39;,&#39;王者农药&#39;,&#39;梦三国&#39;,&#39;魔兽争霸&#39;,&#39;其它&#39;]
 }; {{ title }}  // 显示内容为：<i>热爱的</i>游戏 {{ #title }} // 显示内容为：热爱的游戏

5) Traversal-Ausdruck

<script id="model" type="text/html">
    <h1>{{ title }}</h1>
    <ul>　　　　　// 判断条件自定
        {{if list.length>0}}
            {{each list as value index}}
                <li>{{index+1}}、{{value}}</li>
            {{/each}}
        {{else}}
            <p>没有内容</p>
        {{/if}}
    </ul>
</script>

artTemplate-Methode:

Da sind zwei Parameterwerte in der Vorlagenfunktion.

Der erste Parameter stellt die Vorlage dar, die kompiliert werden muss (geben Sie die ID der Vorlage ein)

Der zweite Parameter sind die Daten, die in die Vorlage eingegeben werden müssen, und der Rückgabewert ist die kompilierte HTML-Zeichenfolge

artTemplate-Standardkonfiguration

Codebeispiel:

{{each list as value index}}
    <li>{{index+1}}、{{value}}</li>
{{/each}}// 也可以被简写为
{{each list}}
    <li>{{$index+1}}、{{$value}}</li>
{{/each}}

Das obige ist der detaillierte Inhalt vonWie verwende ich ein Vorlagen-Plug-in in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!