<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery Template</title>
<!-- 第一步：引入引擎文件 两个： JQUERY库文件，JQUERY TEMPLATE模板引擎-->
<script src="/js/jquery.js"></script>
<script src="/js/jquery.tmpl.min.js"></script>
</head>
<body>
<div id="box1"></div>
<!--
第二步：编写模板
使用 script标签来编写模板， 必须有两个必须 id 和 type
type属性可以是 text/x-jquery-tmpl 和 text/html
-->
<script id="mytmpl" type="text/x-jquery-tmpl">
<h1>{{= title}}</h1>
<ul>
{{each(i,value) lists}}
<li>{{= i}}的值是：{{= value}}</li>
{{/each}}
</ul>
</script>
<!-- 第三步： 渲染模板 -->
<script>
$(function(){
var data={title:'我又500万啦',lists: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']};不要遍历了
//渲染模板的语法： $('模板ID').tmpl(JSON数据).appendTo('HTML元素ID');
$('#mytmpl').tmpl(data).appendTo('#box1');
});
</script>
</body>
</html>
