JS模板引擎-腾讯artTemplate的使用

最新推荐文章于 2019-12-25 15:36:58 发布

转载最新推荐文章于 2019-12-25 15:36:58 发布 · 226 阅读

本文深入探讨了艺术模板引擎的基本使用方法，包括模板的引入、复杂嵌套写法及数据渲染技巧，通过实例展示了如何高效地利用该引擎进行网页动态内容的生成。

参考资料：https://github.com/aui/artTemplate
http://aui.github.io/art-template/zh-cn/

基本使用

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="content"></div>

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

    <script id="test" type="text/html">
        <h1>{{title}}</h1>
        <ul>
            {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
            {{/each}}
        </ul>
    </script>

    <script>
        var data = {
            title: '基本例子',
            isAdmin: true,
            list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
        };
        var html = template('test', data);
        document.getElementById('content').innerHTML = html;
    </script>
</body>

</html>

引入模板页的写法

由于开发过程中不会将模板和js写在页面内，所以，我们会单独写一个模板页，并将其引入到页面内，进行模板替换，如果是这样的话，我们就需要对调用template的方法进行一些小小的调整

模板页html如下

{{if isAdmin}}

<h1>{{title}}</h1>
<ul>
    {{each list as value i}}
    <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
</ul>

{{/if}}

js代码如下

<script>
var obj = {
    title: '模板页获取例子',
    isAdmin: true,
    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html=$.get('template.html',function (data) {
    var render = template.compile(data);
    var str = render(obj);

    document.getElementById('content').innerHTML = str;
})
</script>

这里使用jquery的get方法获取模板页，这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。

复杂例子，嵌套写法

数据：

inputData = {
    "flag": true,
    "orderArray": [{
        "id": "1",
        "name": "张三", //用户名
        "identity": [ //证件类型
            {
                "id_type": [{
                    "id": 1,
                    "name": "身份证"
                }],
                "id": "110105199408286510"
            }
        ],
        "phone": "15210329866", //手机号
        "date_of_birth": "19940828", //出声日期
        "address": "北京", //地址
    }, {
        "id": "2",
        "name": "赵四",
        "identity": [{
            "id_type": [{
                "id": 1,
                "name": "身份证"
            }],
            "id": "110105199508286510"
        }],
        "phone": "15210329877",
        "date_of_birth": "19950828",
        "address": "北京",
    }, {
        "id": "3",
        "name": "王五",
        "identity": [{
            "id_type": [{
                "id": 2,
                "name": "护照"
            }],
            "id": "G49331247"
        }],
        "phone": "15210329877",
        "date_of_birth": "20010124",
        "address": "上海",
    }]
};

模板代码

<script type="text/html" id="test">
    {{if flag}}
        {{each orderArray as value}}
    <tr>
        <td>{{value.name}}</td>
        {{each value.identity as v}}
        {{each v.id_type as vi}}
        <td>{{vi.name}}</td>
        {{/each}}
        <td>{{v.id}}</td>
        {{/each}}
        <td>{{value.phone}}</td>
        <td>{{value.date_of_birth}}</td>
    </tr>
        {{/each}}
    {{/if}}
</script>