jQuery-template-web.js 渲染页面
一、下载并模板引擎template-web.js文件
<script src="template-web.js"></script>二、准备数据
后台请求回来的数据或者自己造的数据
三、准备要渲染的模板
注意：
1、模板要用：
<script type="text/html" id="tmp"></script">
包裹，只起包裹作用不会被渲染2、指定 type=”text/html”
3、定义模板id：id=”tmp” 绑定数据的时候用，id名字随便起
模板中遍历数据：
{{ each arr item index }} 这里放内容 {{/each}}
参数说明：
each： 遍历的关键字 （固定）
arr：被遍历的数组
item：当前项
index： 当前项下标
四、将数据与模板id绑定，生成页面
1、通过模板的id,将数据和和模板绑定,并用一个变量接收
var str = template("模板id", 数据);
2、将变量插入页面结构中渲染出来
$('#add').html(html)
具体代码
<body>
<div id="add"></div>
<script src="./jquery-1.12.4.min.js"></script>
<!-- 1.下载并模板引擎template-web.js文件 -->
<script src="./template-web.js"></script>
<!-- 3.准备要渲染的模板 -->
<script type="text/html" id="tmp">
<div>{{title}}</div>
{{each list item index}}
<div>
<span>当前项: {{item}}</span>
<span>下标: {{index}}</span>
</div>
{{/each}}
</script>
<script>
// 2.准备数据
var obj = {
title: '夜宵',
list: ['小龙虾', '烤茄子', '大螃蟹', '羊肉串', '啤酒']
}
// 4.将数据与模板id绑定，生成页面
var html = template('tmp',obj) //通过模板的id,将数据和和模板绑定,并用一个变量接收
$('#add').html(html) //将变量插入页面结构中渲染出来
</script>
</body>
