Comment utiliser le plug-in de modèle en JavaScript ?

Ce chapitre vous présentera comment utiliser le plug-in de modèle en JavaScript et comprendra comment utiliser le plug-in de modèle. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Présentation du plug-in : le modèle est un moteur de modèles JavaScript hautes performances.

Fonctionnalités du plug-in :

1. Excellentes performances et vitesse d'exécution rapide (plus de 20 fois celle de moustache et tmpl> 2. Prend en charge le débogage d'exécution et peut) ; localiser avec précision les exceptions L'instruction où se trouve le modèle ;

3. Il prend en charge NodeJS Express

4. Il est sûr et la sortie est échappée par défaut ; 🎜> 5. Il peut être utilisé dans le navigateur Implémentation de bout en bout du chargement des modèles par chemin

6. Prend en charge la pré-compilation, qui peut convertir les modèles en fichiers js très rationalisés

7. Introduction aux déclarations de modèle, pas besoin de préfixes pour référencer les données, et une version concise et des versions natives sont disponibles

8. Prend en charge tous les navigateurs populaires

Commencez (il existe deux syntaxes, cet article présente la syntaxe d'introduction)

1) Le modèle artTemplate doit utiliser une balise de script de type="text/html" pour stocker le modèle (la balise est HTML); 2) Commencez à écrire votre propre modèle

3) Utilisez le modèle de rendu des données

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

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

Introduction à la syntaxe concise de artTemplate :

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

1) Vous devez citer la version de la syntaxe concise avant utilisation, par exemple : 2) Expression :

　L'instruction entourée de symboles {{ et }} est une expression de modèle.

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

3) Expression de sortie :

Sortie avec encodage de contenu : {{ title }}

Sortie sans encodage : {{ #title }}

4) Expression conditionnelle

5) Expression traversante

// 假如有这样一段数据，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>

Méthode artTemplate :

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

Il y a deux valeurs de paramètres dans la fonction modèle. Le premier paramètre représente le modèle qui doit être compilé (remplissez l'ID du modèle) Le deuxième paramètre correspond aux données qui doivent être renseignées dans le modèle, et la valeur de retour est la chaîne HTML compilée

configuration par défaut de artTemplate

Exemple de code :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!