artTemplate的常用方法

在没接触artTemplate之前，我都是手写字符串拼接做模板替换。这样做往往费时费力，而当我使用了artTemplate之后，只需要两句话，就搞定了全部！通过长期的使用artTemplate，现在我为大家总结出其最全的常用方法。

以上是官方文档以及下载地址。

一：安装使用

下载artTemplate后，找到template.js，引入到页面即可

这里写图片描述

引入代码：

<script type="text/javascript" src="artTemplate/dist/template.js"></script>

二：最基本的使用方法

官方给出的小demo就是最基本的使用方法：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>

<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}

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

{{/if}}
</script>

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

效果展示：
这里写图片描述

其实上诉例子给出的写法并不是唯一的写法，还有原生的写法和不重新命名的写法

原生写法：

<%if (admin){%>
    <%include('admin_content')%>

    <%for (var i=0;i<list.length;i++) {%>
        <div><%=i%>. <%=list[i].user%></div>
    <%}%>
<%}%>

不重新命名的写法：

{{if admin}}
    {{include 'admin_content'}}

    {{each list}}
        <div>{{$index}}. {{$value.user}}</div>
    {{/each}}
{{/if}}

总结，原生写法太过麻烦，不需要深究，推荐使用简易写法，我们可以使用{{each list as value i}}，
为每一项和其序号重新命名成value，i。这样，在后面只需要使用value和i即可。我们也可以不重新命名，直接使用{{each list}}，但这样的话，后面的需要使用$加index和value。

三：引入模板页的写法

上诉的基本写法，是将模板写在页面内的，但是我们在实际开发中，一般不会将模板和js写在页面内，所以，我们会单独写一个模板页，并将其引入到页面内，进行模板替换，如果是这样的话，我们就需要对调用template的方法进行一些小小的调整，具体如下：

1.构建模板页
这里写图片描述

2.模板页代码

{{if isAdmin}}

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

{{/if}}

3.进行模板替换
由于模板是单独写在一个页面的，所以我们需要ajax的get方法获取到模板页，然后在进行模板替换。

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

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

这里，我使用的是jQuery的get方法获取模板页，然后再利用template.compile()获取渲染内容，然后将数据obj渲染进去，最后添加到页面里即可。

注意：这时候就不能使用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": "上海",
                }]
            };

我们可以看到在inputData下有一个orderArray的对象数组，而在orderArray下还有identity，identity下还有id_type。如果我们需要使用id_type里的数据进行模板替换。那么我们只需要进行多次each循环数组即可。

具体操作如下：

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

只要理解template里每个参数，变量的含义，我们就能灵活运用这个优秀的模板替换工具了，相信看完我写的博客后，对大家有帮助。

下面是利用teplate.js做的一道面试题，主要是数组嵌套问题：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
        </style>
    </head>
    <body>
    <table border="1px solid #ccc" style="border-collapse:collapse;" id="table">
        <tr>
            <th>姓名</th>
            <th>证件类型</th>
            <th>证件号</th>
            <th>手机号</th>
            <th>出生日期</th>
        </tr>
        <tbody id="content">

        </tbody>
    </table>

    <div id="info"  style="border: 1px solid #ccc; text-align: center; display: none;">
        <h2>编号：111</h2>
        <p>姓名：<span id="name">张三</span></p>
        <p>证件类型：<span id="iden">张三</span></p>
        <p>证件号：1111</p>
        <p>手机号：<span id="phone">张三</span></p>
        <p>出生日期：<span id="add">张三</span></p>
        <p>所在地：北京</p>
        <p> <span>取消</span> <span id="btn">确定</span></p>
    </div>

    </body>
    <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>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/template.js"></script>
    <script>
        var inputData;
        function getTestData() {
            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": "上海",
                }]
            };

            var html = template('test', inputData);
            document.getElementById('content').innerHTML = html;

        }

        function clicked(id){
            var o, i;
            o = document.getElementById(id).rows;//表格所有行
            for(i = 0; i < o.length; i++){
                o[i].ondblclick = function(){ //设置事件
                    var oo,op,oq,or;
                    oo = this.cells[0];
                    op = this.cells[1];
                    oq = this.cells[3];
                    or = this.cells[4];
//                  alert(oo)
                    document.getElementById('name').innerHTML=oo.innerHTML;
                    document.getElementById('iden').innerHTML=op.innerHTML;
                    document.getElementById('phone').innerHTML=oq.innerHTML;
                    document.getElementById('add').innerHTML=or.innerHTML;
                    document.getElementById('info').style.display='block';
                    document.getElementById('btn').onclick=function () {
                        document.getElementById('info').style.display='none';
                    }
                }
            }
        }
        getTestData();
        clicked('table')
    </script>

</html>

artTemplate的常用方法

猜你喜欢