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

看《基於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>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章