超快的模板引擎 artTemplate.js

時間 2019-11-17

標籤快的模板引擎 arttemplate.js arttemplate 欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>        
<html lang="en">        
<head>        
    <meta charset="UTF-8">        
    <title>超快的模板引擎 artTemplate.js</title>      
    <style type="text/css">  
    </style>       
</head>        
<body>  
  <div id="content"></div>
  
  <script id="test" type="text/html">
    <h1>{{title}}</h1>
    <ul>
        {{each list as value i}}
            <li>索引 {{i + 1}} ：{{value}}</li>
        {{/each}}
    </ul>
  </script>

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script src="http://cdn.staticfile.org/artTemplate.js/3.0.1/template.js"></script>
  <script type="text/javascript"> 
    var data = {
        title: '標籤',
        list: ['文藝', '博客', '攝影', '電影', '民謠', '旅行', '吉他']
    };
    var html = template('test', data);
    $('#content').html(html);
  </script>  
</body>        
</html>

若是後端給的數據是一個數組，數據裏包含一個對象，前端頁面須要把這個對象裏的每個字段以及字段對應的內容都展現出來，且這個對象裏有多少字段有哪些字段都不是已知的，能夠參考下面的代碼：javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>超快的模板引擎 artTemplate.js</title>
    <style type="text/css">
    .m-list-item {
        position: relative;
        padding: 19px 18px 28px;
        background: #2C355D;
        border-bottom: 1px solid #5C70B0;
        list-style-type: none;
    }

    .m-list-item {
        list-style-type: none;
    }

    .m-right-row {
        line-height: 30px;
    }

    .m-right-label {
        display: inline-block;
        font-size: 14px;
        color: #FFFFFF;
        vertical-align: top;
    }

    .m-right-text {
        display: inline-block;
        margin: 0 0 0 10px;
        max-width: 500px;
        font-size: 14px;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }
    </style>
</head>

<body>
    <ul id="m-list"></ul>
    <script id="m-list-tpl" type="text/html">
        {{each data as info i}}
        <li class="m-list-item">
            {{each info as item j}}
                <div class="m-right-row">
                    <span class="m-right-label">{{item.label}}:</span>
                    <span class="m-right-text">{{item.content}}</span>
                </div>
            {{/each}}
        </li>
        {{/each}}
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="http://cdn.staticfile.org/artTemplate.js/3.0.1/template.js"></script>
    <script type="text/javascript">
    var data = {
        protocols: [{
            'title': '80/HTTP',
            'Status Line': '200 OK',
            'Page Title': 'Core Databases',
            'Server': 'Apache httpd'
        }, {
            'title': '443/HTTPS',
            'Cipher Suite': 'TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 (0xC02F)',
            'Version': 'TLSv1.2',
            'Heartbleed': 'Heartbeat Enabled. Immune to Heartbleed.',
            'Trusted': 'True'
        }]
    };
    var result = [];
    for (var i = 0; i < data.protocols.length; i++) {
        var itemArr = [];
        for (var item in data.protocols[i]) {
            var temp = {};
            temp.label = item;
            temp.content = data.protocols[i][item];
            itemArr.push(temp)
        }
        result.push(itemArr);
    }
    var data = { data: result };
    var html = template('m-list-tpl', data);
    $('#m-list').html(html);
    </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>超快的模板引擎 artTemplate.js</title>
    <style type="text/css">
    .m-list-item-title{line-height: 28px; font-size: 20px;color: #FFFFFF;}
    .m-list-item {
        position: relative;
        padding: 19px 18px 28px;
        background: #2C355D;
        border-bottom: 1px solid #5C70B0;
        list-style-type: none;
    }

    .m-list-item {
        list-style-type: none;
    }

    .m-right-row {
        line-height: 30px;
    }

    .m-right-label {
        display: inline-block;
        font-size: 14px;
        color: #FFFFFF;
        vertical-align: top;
    }

    .m-right-text {
        display: inline-block;
        margin: 0 0 0 10px;
        max-width: 500px;
        font-size: 14px;
        color: #999999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: top;
    }
    </style>
</head>

<body>
    <ul id="m-list"></ul>
    <script id="m-list-tpl" type="text/html">
        {{each data as info i}}
        <li class="m-list-item">
            <div class="m-list-item-title">{{info.title}}</div>     
            {{each info.content as item j}}
                <div class="m-right-row">
                    <span class="m-right-label">{{item.label}}:</span>
                    <span class="m-right-text">{{item.content}}</span>
                </div>
            {{/each}}
        </li>
        {{/each}}
    </script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="http://cdn.staticfile.org/artTemplate.js/3.0.1/template.js"></script>
    <script type="text/javascript">
    var data = {
        protocols: [{
            'title': '80/HTTP',
            'Status Line': '200 OK',
            'Page Title': 'Core Databases',
            'Server': 'Apache httpd'
        }, {
            'title': '443/HTTPS',
            'Cipher Suite': 'TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 (0xC02F)',
            'Version': 'TLSv1.2',
            'Heartbleed': 'Heartbeat Enabled. Immune to Heartbleed.',
            'Trusted': 'True'
        }]
    };
    var result = [];
    for (var i = 0; i < data.protocols.length; i++) {
        var itemArr = {
            title: data.protocols[i].title,
            content: []
        };
        delete data.protocols[i].title;
        for (var item in data.protocols[i]) {
            var temp = {};
            temp.label = item;
            temp.content = data.protocols[i][item];
            itemArr.content.push(temp)
        }
        result.push(itemArr);
    }
    var data = { data: result };
    var html = template('m-list-tpl', data);
    $('#m-list').html(html);
    </script>
</body>

</html>

模板中的條件判斷：css

{{if info.filter}}
    <span class="m-legend-filter active js-filter" data-type="{{data[i].type}}"></span>  
{{else}}
    <span class="m-legend-filter js-filter" data-type="{{data[i].type}}"></span>  
{{/if}}

artTemplate github下載地址：https://github.com/aui/art-templatehtml

備註：歡迎加入web前端求職招聘qq羣：668352707前端