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:

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

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

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

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

<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:

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

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!