Introduction to common operations of javascript template engine art-template

This article brings you an introduction to the common operations of the JavaScript template engine art-template. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

art-template
javascript template engine, official website: https://github.com/aui/art-template

分For native syntax and concise syntax, this article mainly talks about concise syntax

Basic data rendering
Output HTML
Process control
Traversal
Call custom function method
Subtemplate introduction
Basic data rendering
1. Introduce the art-template.js file

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

2. Write the HTML template

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

3. Insert data into the template and output it to the page

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

Output HTML

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

//Note: {{title}} This is the content-encoded output and should be written as {{#title}} This is the content-unencoded output

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

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

Process control statement (if else)

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

The process control in art-template is much more powerful than other templates, just look at the example

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

Nested writing method

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

Loop traversal statements

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

Call custom methods
Register methods through template.helper(name,fnCallBack)
Can be called directly in {{}}

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

Calling subtemplates

{{include 'main'}} introduces subtemplates, the data is shared by default
{{include 'main' a}} a is to specify the data, but it must also be the parent For data, you can take a look at the following example. If a is not injected, the introduced subtemplate will not be able to receive data

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

The above is the detailed content of Introduction to common operations of javascript template engine art-template. For more information, please follow other related articles on the PHP Chinese website!