现在的位置: 首页 > 综合 > 正文

JQuery模板插件-jquery.tmpl的使用

2014年08月29日 ⁄ 综合 ⁄ 共 1689字 ⁄ 字号 评论关闭

看《基于MVC的JavaScript Web富应用开发》了解到jquery.tmpl插件,试用了一下,感觉不错,如果在拼接字符串很麻烦(特别字符串中又有字符串,双引号与单引号滥用时),可以使用这种方法,下面是练习的小实例(插件可以网上搜,不知道csdn能不能贴外链,没有放上去)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		
	</head>

	<body>
		<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>

		<!--引入tmpl插件-->
		<script type="text/javascript" src="jquery/jquery.tmpl.js"></script>
		<script type="text/javascript">
			var object = {
				url: "http://example.com",
				getName: function(){ 
					return "Trevor"; 
				}
			};
			var template = '<li><a href="${url}">${getName()}</a></li>';
			var element = jQuery.tmpl(template, object);
			$("body").append(element);	

			


			//使用{{if url}}...{{/if}}或{{if messages.length}}...{{else}}...{{/if}}来进行逻辑判断
			var elements = {
				url:"http:",
				name:'test'
			}
			template = '<li><a href="${url}">{{if name  == "trst"}}${name == "trst"}{{else}}no name{{/if}}</a></li>';
			var t = jQuery.tmpl(template,elements);
			$("body").append(t);


			//使用{{each}}进行循环逻辑,$index 访问迭代下标,$value访问迭代变量
			var arrayElement = {
				elements:['home','back','link']
			}
			template = '<ul>{{each elements}}<li>${$index + 1}: <em>${$value}</em></li>{{/each}}</ul>';
			$("body").append ($.tmpl(template,arrayElement));
		</script>
	</body>
</html>

它还有一个强大之处是你可以自定义脚本标签并能过ID去引用标签。如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
		
	</head>

	<body>
		<script type="text/javascript" src="jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript" src="jquery/jquery.tmpl.js"></script>

		<!-- 自定义脚本标签 -->
		<script type="text/x-jquery-tmpl" id="someTemplate">
			<span>${getName()}</span>
			
		</script>

		<script>
			var data = {
				getName: function(){ return "Bob" }
			};

			//通过JavaScript的ID引用
			var element = $("#someTemplate").tmpl(data);
			element.appendTo($("body"));
		</script>
	</body>
</html>

抱歉!评论已关闭.