easyTemplate实例

bijian1013

浏览: 3227873 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

easyTemplate freeMark 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>

运行效果：