Einführung in allgemeine Vorgänge der Javascript-Vorlagen-Engine art-template

Dieser Artikel bietet Ihnen eine Einführung in die allgemeinen Funktionen der JavaScript-Vorlagen-Engine. Ich hoffe, dass er Ihnen als Referenz dienen wird . helfen.

art-template
Javascript-Template-Engine, offizielle Website: https://github.com/aui/art-template

Punkte Für native Syntax und prägnante Syntax geht es in diesem Artikel hauptsächlich um prägnante Syntax

Grundlegendes Datenrendering
HTML ausgeben
Prozesssteuerung
Traversal
Benutzerdefinierte Funktionsmethode aufrufen
Einführung in die Untervorlage
Grundlegendes Datenrendering
1. Führen Sie die Datei art-template.js ein

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

2. Schreiben Sie die HTML-Vorlage

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

3. Fügen Sie Daten in die Vorlage ein und geben Sie sie aus Seite

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

HTML ausgeben

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

//Hinweis: {{title}} ist die inhaltscodierte Ausgabe und sollte als {{#title}} geschrieben werden. Dies ist die inhaltsuncodierte Ausgabe

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

Prozesskontrollanweisung (falls sonst)

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

Die Prozesskontrolle in art-template ist viel leistungsfähiger als andere Vorlagen, schauen Sie sich einfach das Beispiel an

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

Verschachteltes Schreiben Methode

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

Anweisungen durchlaufen

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

Benutzerdefinierte Methoden aufrufen
Methoden über template.helper(name,fnCallBack) registrieren
Sie können

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

< direkt in {{ aufrufen }} 🎜>Untervorlage aufrufen

{{include 'main'}} Um die Untervorlage einzuführen, werden die Daten standardmäßig gemeinsam genutzt

{{include 'main' a}} a ist Um die Daten anzugeben, muss es sich jedoch auch um die übergeordnete Vorlage handeln. Für Daten können Sie sich das folgende Beispiel ansehen. Wenn a nicht injiziert wird, kann die eingeführte Untervorlage keine Daten empfangen

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

Das obige ist der detaillierte Inhalt vonEinführung in allgemeine Vorgänge der Javascript-Vorlagen-Engine art-template. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!