最近看了下baiduTemplate。感觉跟artTemplate类似。所有就简单的记录一下。
1.顶部引入baiduTemplate.js文件
2.body里面设置一个元素设置类名或者id,以便后面注入模板生成的html;
3.body后面创建一个script标签,type="text/html" 在里面写模板 与artTemplate类似。 <% %> 里面写自己的逻辑,赋值用=
4.在后面再创建一个script标签。里面整合数据到模板中,并赋值给第二步的元素;
下面是一个栗子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="./baiduTemplate.js"></script>
<script type="text/html" id="test">
<h1>
<%=title%>
</h1>
<div>
<%if(list.length){%>
<%for(var i=0;i < list.length; i++){%>
<p>
<%=list[i]%>
</p>
<%}%>
<%}%>
</div>
</script>
<script>
var data = {
title: "我是标题",
list: ['内容一', '内容二', '内容三']
}
var html = baidu.template('test', data);
document.querySelector("#box").innerHTML = html;
</script>
</body>
</html>