artTemplate基本使用方法script type="text/html"

最新推荐文章于 2023-03-17 13:56:16 发布

小小笔记本

最新推荐文章于 2023-03-17 13:56:16 发布

阅读量9k

点赞数 2

分类专栏：总结

总结专栏收录该内容

14 篇文章 0 订阅

订阅专栏

artTemplate基本使用方法

一.方法

1.template(id1, data)用script标签来展示
根据 id1 渲染模板。内部会根据document.getElementById(id2)查找模板。
如果没有 data 参数，那么将返回一渲染函数。

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

2.template.compile(source, options)将渲染模板用javascript拼接实现
将返回一个渲染函数。

    var render = template.compile(data);  //data是模板，，用$.get获取
    var str = render(obj);
    document.getElementById('content').innerHTML = str;

二.例子

(一).用type="text/html"的script标签存放模板
注意：

1.必须给script标签定义id，而且只能是id，不能是class。

因为在使用template(id,data)方法的时候，该方法会根据id渲染模板，引擎内部会根据document.getElementById(id)查找模板。如果使用class作为参数，artTemplate引擎会报错。如果没有 data 参数，将返回一渲染函数。

2.在script标签中的type类型默认为type/javascript。在script标签中，必须重新声明type类型为text/html，否则会没有效果。

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

在这里插入图片描述

(二).引入模板页的写法

1.构建模板页 :template-me.html

{{if isAdmin}}
	<h1>{{title}}</h1>
	<ul class="oo">
	    {{each list as value i}}
	        <li >索引 {{i + 1}} ：{{value}}</li>
	    {{/each}}
	</ul>
{{/if}}

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../../dist/jQuery-2.1.4.min.js"></script>
<script src="../../dist/template.js"></script>
 
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
$(function () {
	var obj = {
	    title: '模板页获取例子',
	    isAdmin: true,
	    list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
	};
	var html=$.get('template-me.html',function (data) {
	    var render = template.compile(data);
	    var str = render(obj);
 
	    document.getElementById('content').innerHTML = str;
	})
});
</script>
</body>
</html>

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

注意：这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。
在这里插入图片描述

(三).复杂数据（数组嵌套）的模板写法

1.表格的模板

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

<!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>
 
 
<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 src="../dist/jQuery-2.1.4.min.js"></script>
<script src="../dist/template.js"></script>
<script>
    var inputData;
    //模板引擎使用
    function getTestData() {
    	// inputData数据
        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>
</body>
</html>

在这里插入图片描述

小小笔记本

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
artTemplate基本使用方法script type="text/html"

artTemplate基本使用方法一.方法1.template(id1, data)用script标签来展示根据 id1 渲染模板。内部会根据document.getElementById(id2)查找模板。如果没有 data 参数，那么将返回一渲染函数。var html = template('test', data);document.getElementById('content...
复制链接

扫一扫