javascript的模板引擎art-template常用操作有哪些

發(fā)布時(shí)間：2021-01-21 14:17:43 來(lái)源：億速云閱讀：180 作者：小新欄目：web開發(fā)

小編給大家分享一下javascript的模板引擎art-template常用操作有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于javascript的模板引擎art-template常用操作介紹，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

art-template
javascript 模板引擎，官網(wǎng)：https://github.com/aui/art-template

分為原生語(yǔ)法和簡(jiǎn)潔語(yǔ)法，本文主要是講簡(jiǎn)潔語(yǔ)法

基礎(chǔ)數(shù)據(jù)渲染
輸出HTML
流程控制
遍歷
調(diào)用自定義函數(shù)方法
子模板引入
基礎(chǔ)數(shù)據(jù)渲染
一、引入art-template.js文件

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

二、編寫HTML模板

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

三、向模板插入數(shù)據(jù)，并輸出到頁(yè)面

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

輸出HTML

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

//注意：{{title}}這是對(duì)內(nèi)容編碼輸出，應(yīng)該寫成{{#title}}這是對(duì)內(nèi)容不編碼輸出

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

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

流程控制語(yǔ)句（if else）

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

art-template里面的流程控制就相對(duì)其他模板來(lái)說(shuō)強(qiáng)大很多了，直接看例子吧

<script id="test" type="text/html">
    <div>
        {{if bok==22}}
        <h2>線上</h2>
        {{else if bok==33}}
        <h3>隱藏</h3>
        {{else}}
        <h4>走這里</h4>
        {{/if}}
    </div>
</script>
<script>
    var data = {
        "bok":22
    };
    var html = template('test',data);
    document.getElementById("app").innerHTML = html;
</script>

嵌套的寫法

<script id="test" type="text/html">
    <div>
        {{if bok}}
            {{if list.length>=0}}
                {{each list}}
                    <p>{{$index}}:{{$value}}</p>
                {{/each}}
            {{else}}
                <p>沒(méi)有數(shù)據(jù)</p>
            {{/if}}
        {{/if}}
    </div>
</script>
<script>
    var data = {
        "bok":true,
        list:["a","b","c"]
    };
    var html = template('test',data);
    document.getElementById("app").innerHTML = html;
</script>

循環(huán)遍歷語(yǔ)句

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

<script id="test" type="text/html">
<div>
    <ul>
        {{if c==100}}
            <ul>
                {{each person}}
                    <li>
                        編號(hào)：{{$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>

調(diào)用自定義方法
通過(guò)template.helper(name,fnCallBack)注冊(cè)方法
可以直接在{{}}中調(diào)用

<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}
        ]
    };
    //自定義函數(shù)
    template.helper("show",function(sex){
        console.log(sex);//同樣可以打印日志到控制臺(tái)
        if(sex==0){
            return "男"
        }else if(sex==1){
            return "女"
        }
    });
    var html = template("test",data);
    document.getElementById("app").innerHTML = html;
</script>

調(diào)用子模板

{{include 'main'}} 引入子模板，數(shù)據(jù)默認(rèn)為共享
{{include 'main' a}} a為制定數(shù)據(jù)，但是同樣必須是父級(jí)數(shù)據(jù)，可以看看下面的例子，如果不注入的a的話，引入的子模板是接受不到數(shù)據(jù)的

<body>
<div id="app"></div>
<script src="template-debug.js"></script>
<script id="main" type="text/html">
    <ul>
       {{each list}}
            <li>{{$value}}</li>
        {{/each}}
    </ul>
</script>
<script id="test" type="text/html">
    <div>
        <ul>
            {{each person}}
                <li>{{$value.name}}</li>
            {{/each}}
        </ul>
        {{include 'main' a}}
    </div>
</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:['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
        }
    };
    var html = template("test",data);
    document.getElementById("app").innerHTML=html;
</script>
</body>

以上是“javascript的模板引擎art-template常用操作有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

javascript的模板引擎art-template常用操作有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽