js模板引擎-art-template常用

本文轉載自查看原文 2017-11-23 19:57 4107

art-template

javascript 模板引擎

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

基礎數據渲染
輸出HTML
流程控制
遍歷
調用自定義函數方法
子模板引入

基礎數據渲染

一、引入art-template.js文件

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

二、編寫HTML模板

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

三、向模板插入數據，並輸出到頁面

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

輸出HTML

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

//注意：{{title}}這是對內容編碼輸出，應該寫成{{#title}}這是對內容不編碼輸出

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

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

流程控制語句（if else）

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

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

<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('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>沒有數據</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>

循環遍歷語句

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

調用自定義方法

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

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

調用子模板

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

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

原生語法

使用原生語法，需要導入template-native.js文件。

在HTML中定義模板，注意模板的位置，不要放到被渲染區域，防止模板丟失。

<script id="main_panel_big_sale_template" type="text/html">
    <% for (var i = 0; i < products.length; i ++) { %>
        <% var product =products[i]; %>
        <% if (i < 3) { %>
            <li>
                <img src="<%=getImageUrl(product.pictographicIconList[0].image.url)%>" data-imgname="<%=product.pictographicIconList[0].image.url%>">
                <div class="flash-time-box">
                    <span>2015-02-09</span>
                </div>
                <strong class="marque"><%=product.name%></strong>
                <strong class="libelle"><%=product.description%></strong>
                <div class="no-picto">
                    <span class="prod-tip">
                        <img src="img/grey.png" data-original="img/icon.png">
                    </span>
                    <span class="italic black">
                        <span class="cny-curr">¥&nbsp;<%=formatPrice(product.promoPrice,'integer')%></span><span class="decimal"><%=formatPrice(product.promoPrice,'decimal')%></span>
                    </span>
                </div>
            </li>
        <% } %>
    <% } %>
</script>

template(id, data)

渲染數據到頁面

$('#main_panel').html(template('main_panel_big_sale_template', data));

簡潔語法

使用簡潔語法，導入template.js文件。

<script id="main_panel_big_sale_template" type="text/html">
   {{each products as product i}}
   {{if i < 3}}
       <li>
           <img src="{{product.pictographicIconList[0].image.url | getImageUrl}}" data-imgname="{{product.pictographicIconList[0].image.url}}">
           <div class="flash-time-box">
               <span>2015-02-09</span>
           </div>
           <strong class="marque">{{product.name}}</strong>
           <strong class="libelle">{{product.description}}</strong>
           <div class="no-picto">
                <span class="prod-tip">
                    <img src="img/grey.png" data-original="img/icon.png">
                </span>
                <span class="italic black">
                    <span class="cny-curr">¥&nbsp;{{product.price.value | formatPrice: 'integer'}}</span><span class="decimal">{{product.price.value | formatPrice: 'decimal'}}</span>
                </span>
           </div>
       </li>
   {{/if}}
   {{/each}}
</script>

渲染數據到頁面，和原生語法一樣

$('#main_panel').html(template('main_panel_big_sale_template', data));

調用外部函數

template.helper

上面的例子中，都調用了formatPrice函數，要調用此函數需要通過helper方法注冊：

template.helper('formatPrice', function(price, type) {
    if(price){
        var arrayPrice = price.toString().split(".");
        if(type == 'integer') {
            return arrayPrice[0]?arrayPrice[0]:"0";
        }else if (type =='decimal') {
            return arrayPrice[1]?arrayPrice[1].length == 1?"."+arrayPrice[1]+"0":"."+arrayPrice[1]:".00";
        }
    }else{
        if(type == 'integer') {
            return "0";
        }else if (type =='decimal') {
            return ".00";
        }
    }
});

原生語法與簡潔語法比較

語法類型	調用外部函數
原生	<%=formatPrice(product.promoPrice,'integer')%>
簡潔	{{product.price.value \| formatPrice: 'integer'}}

簡潔語法的傳參有點奇怪，原生語法就很好理解，如果要傳遞三個參數，簡潔語法該怎么寫呢？

簡潔語法的循環如果要做更多邏輯，也實現不了。

推薦使用原生語法

template.compile

模板可以直接寫在JS中，再編譯渲染。

var source = '<ul>'
+    '<% for (var i = 0; i < list.length; i ++) { %>'
+        '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
+    '<% } %>'
+ '</ul>';

var render = template.compile(source);
var html = render({list: ['攝影', '電影', '民謠', '旅行', '吉他']});
document.getElementById('content').innerHTML = html;

這種方式的的缺點是，模板通過字符串拼接，不好維護，適合簡單模板。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js模板引擎-art-template常用總結 js模板引擎-art-template常用總結 js模板引擎-art-template常用總結（轉） art-template引擎模板 js模板引擎art-Template（以前的artTemplate） js模板引擎art-template使用方法 art-template模板引擎循環嵌套 Express使用art-template模板引擎 Node 使用模板引擎art-template art-template模板判斷