Introduction aux opérations courantes du moteur de modèles Javascript art-template

Cet article vous présente les opérations courantes du modèle d'art du moteur de modèles JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. . aide.

art-template
moteur de modèles javascript, site officiel : https://github.com/aui/art-template

Points Pour la syntaxe native et la syntaxe concise, cet article parle principalement de la syntaxe concise

Rendu des données de base
Sortie HTML
Contrôle de processus
Traversal
Appeler la méthode de fonction personnalisée
Introduction au sous-modèle
Rendu des données de base
1. Importez le fichier art-template.js

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

2 Écrivez le modèle HTML

<script id="test" type="text/html">
    <h1>{{title}}</h1>
</script>

3. et affichez-le Accédez à la page

var data = {
    title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;

et affichez le HTML

<script id="test" type="text/html">
    <h1>{{title}}</h1>
</script>

//Remarque : {{title}} Il s'agit de la sortie d'encodage du contenu et doit être écrit comme {{ #title}} Ceci est le contenu Sortie sans encodage

<script id="test" type="text/html">
    <h1>{{#title}}</h1>
</script>

var data = {
    title:"<p>hello world</p>"
};
var html = template("test",data);
document.getElementById(&#39;content&#39;).innerHTML = html;

Instruction de contrôle de flux (si autre)

{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}

Le contrôle de processus dans art-template est beaucoup plus puissant que les autres modèles , il suffit de regarder l'exemple

<script id="test" type="text/html">
    <div>
        {{if bok==22}}
        <h1>线上</h1>
        {{else if bok==33}}
        <h2>隐藏</h2>
        {{else}}
        <h3>走这里</h3>
        {{/if}}
    </div>
</script>
<script>
    var data = {
        "bok":22
    };
    var html = template(&#39;test&#39;,data);
    document.getElementById("app").innerHTML = html;
</script>

Méthode d'écriture imbriquée

<script id="test" type="text/html">
    <div>
        {{if bok}}
            {{if list.length>=0}}
                {{each list}}
                    <p>{{$index}}:{{$value}}</p>
                {{/each}}
            {{else}}
                <p>没有数据</p>
            {{/if}}
        {{/if}}
    </div>
</script>
<script>
    var data = {
        "bok":true,
        list:["a","b","c"]
    };
    var html = template(&#39;test&#39;,data);
    document.getElementById("app").innerHTML = html;
</script>

Instruction de parcours de boucle

{{each name}}
索引：{{$index}}
值：{{$value}}
{{/each}}

<script id="test" type="text/html">
<div>
    <ul>
        {{if c==100}}
            <ul>
                {{each person}}
                    <li>
                        编号：{{$index+1}}--姓名：{{$value.name}}--年龄：{{$value.age}}
                    </li>
                {{/each}}
            </ul>
        {{/if}}
    </ul>
</div>
</script>

<script>
    var data = {
        c:100,
        person:[
            {name:"jack",age:18},
            {name:"tom",age:19},
            {name:"jerry",age:20},
            {name:"kid",age:21},
            {name:"jade",age:22}
        ]
    };
    var html = template("test",data);
    document.getElementById("content").innerHTML = html;
</script>

Appeler une méthode personnalisée
via La méthode d'enregistrement template.helper(name, fnCallBack)
peut être appelée directement dans {{}}

<script id="test" type="text/html">
<div>
    {{if c==100}}
        <ul>
            {{each person}}
                <li>姓名：{{$value.name}}--性别：{{show($value.sex)}}</li>
            {{/each}}
        </ul>

    {{/if}}
</div>
</script>
<script>
    var data = {
        c:100,
        person:[
            {name:"jack",age:18,sex:1},
            {name:"tom",age:19,sex:0},
            {name:"jerry",age:20,sex:0},
            {name:"kid",age:21,sex:1},
            {name:"jade",age:22,sex:0}
        ]
    };
    //自定义函数
    template.helper("show",function(sex){
        console.log(sex);//同样可以打印日志到控制台
        if(sex==0){
            return "男"
        }else if(sex==1){
            return "女"
        }
    });
    var html = template("test",data);
    document.getElementById("app").innerHTML = html;
</script>

pour appeler le sous-modèle

{{include 'main'}} pour introduisez le sous-modèle et les données sont partagées par défaut
{{include 'main' a}} a est la donnée spécifiée, mais ce doit également être la donnée parent. Vous pouvez regarder l'exemple ci-dessous. Si a ne l'est pas. injecté, le sous-modèle introduit ne pourra pas recevoir les données

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


<script>
    var data = {
        person:[
            {name:"jack",age:18},
            {name:"tom",age:19},
            {name:"jerry",age:20},
            {name:"kid",age:21},
            {name:"jade",age:22}
        ],
        a:{
            list:[&#39;文艺&#39;, &#39;博客&#39;, &#39;摄影&#39;, &#39;电影&#39;, &#39;民谣&#39;, &#39;旅行&#39;, &#39;吉他&#39;]
        }
    };
    var html = template("test",data);
    document.getElementById("app").innerHTML=html;
</script>

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!