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

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

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

分為原生語法和簡潔語法，本文主要是講簡潔語法

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

二、編寫HTML模板

    
{{title}}

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

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

輸出HTML

    
{{title}}

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

    
{{#title}}


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

流程控制語句（if else）

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

art-template里面的流程控制就相對其他模板來說強大很多了，直接看例子吧

    

        {{if bok==22}}
        
線上
        {{else if bok==33}}
        
隱藏
        {{else}}
        
走這里
        {{/if}}
    

嵌套的寫法

    

        {{if bok}}
            {{if list.length>=0}}
                {{each list}}
                    
{{$index}}:{{$value}}
                {{/each}}
            {{else}}
                
沒有數(shù)據(jù)
            {{/if}}
        {{/if}}
    

循環(huán)遍歷語句

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

    

        {{if c==100}}
            

                {{each person}}
                    

                        編號：{{$index+1}}--姓名：{{$value.name}}--年齡：{{$value.age}}
                    
                {{/each}}
            
        {{/if}}
    

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

    {{if c==100}}
        

            {{each person}}
                
姓名：{{$value.name}}--性別：{{show($value.sex)}}
            {{/each}}
        

    {{/if}}

調(diào)用子模板

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