easyTemplate范例
easyTemplate实例
实例一：list简单应用
<!doctype html>
<html>
<head>
<script src="lib/jquery-1.7.2.js" type="text/javascript"></script>
<script src="lib/easy.template.js" type="text/javascript"></script>
</head>
<body>
<div id="localSign"></div>
</body>
<script id="templateSign" type="text/x-easy-template">
<#macro bjTest data>
<#list data as list>
<li>这里是第${list_index+1}列：${list}</li>
</#list>
</#macro>
</script>
<script type="text/javascript">
var navigationLinkData = [
'one','two','three','four','five','six'
];
var getNavContent = function(data){
if(!data || !data.length){
return '';
}
var res = easyTemplate($('#templateSign').html(), data).toString();
console.log(res);
return res;
};
$('#localSign').html(getNavContent(navigationLinkData));
</script>
</html>
运行效果：
实例二：添加到页面多处的list应用
<!doctype html>
<html>
<head>
<script src="lib/jquery-1.7.2.js" type="text/javascript"></script>
<script src="lib/easy.template.js" type="text/javascript"></script>
</head>
<body>
<div class="localSign"></div>
----------------------------------
<br>
bijian
<br>
----------------------------------
<br>
<div class="localSign"></div>
</body>
<script id="templateSign" type="text/x-easy-template">
<#macro bjTest data>
<#list data as list>
<li>这里是第${list_index+1}列：${list.code},${list.name}</li>
</#list>
</#macro>
</script>
<script type="text/javascript">
var navigationLinkData = [
{code:'one',name:'一'},{code:'two',name:'二'},{code:'three',name:'三'},{code:'four',name:'四'},{code:'five',name:'五'},{code:'six',name:'六'}
];
var getNavContent = function(data){
if(!data || !data.length){
return '';
}
var res = easyTemplate($('#templateSign').html(), data).toString();
console.log(res);
return res;
};
$('.localSign').html(getNavContent(navigationLinkData));
</script>
</html>
运行效果：
实例三：表格列数据模块化生成
<!doctype html>
<html>
<head>
<script src="lib/jquery-1.7.2.js" type="text/javascript"></script>
<script src="lib/easy.template.js" type="text/javascript"></script>
</head>
<body>
<table border="1">
<tr>
<td>第一栏</td>
<td>第二栏</td>
<td>第三栏</td>
<td>动态一栏</td>
<td>动态二栏</td>
<td>动态三栏</td>
</tr>
<tr id="localSign0">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="localSign1">
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr id="localSign2">
<td>一</td>
<td>二</td>
<td>三</td>
</tr>
</table>
</body>
<script id="templateSign" type="text/x-easy-template">
<#macro bjTest data>
<td>${data.code}</td>
<td>${data.name}</td>
<td>${data.age}</td>
</#macro>
</script>
<script type="text/javascript">
var navigationLinkData = [
{code:'001',name:'张三',age:20},
{code:'002',name:'李四',age:25},
{code:'003',name:'王五',age:30}
];
var getNavContent = function(data){
if(!data){
return '';
}
var res = easyTemplate($('#templateSign').html(), data).toString();
console.log(res);
return res;
};
for(var i=0;i<navigationLinkData.length;i++) {
$('#localSign'+i).append(getNavContent(navigationLinkData[i]));
}
</script>
</html>
运行效果：
附：macro标签的作用就是输出模板的前后注释标识