使用underscore的template自定義模板

underscore的template()是一個十分重要的函數，該函數能夠解析3種模板標籤,分別以下：

template() 函數模板標籤

模板標籤	功能
<% %>	標籤中包含的一般是Javascript代碼，在頁面渲染數據時執行
<%=  %>	標籤中包含的一般是變量名、函數名、對象屬性、執行時直接展示調用後的數據
<%-  %>	標籤在輸出數據時，能將HTML標記轉成經常使用字符串形式，以免代碼的攻擊

調用格式 : _.template(templateString,[data],[settings])

其中，參數templateString就是模板標籤，可選參數data爲渲染的數據，可選參數settings爲自定義模板標籤的字符格式，好比能夠將<% %> 修改成 {% %} 格式

 

簡單示例以下：

<div id="test"></div>
	<script type="text/template" id="testTpl">
		<% _.each(categorys, function (item) { %>
		  	<div>
		   	 	<%= item.categoryName %>
		  	</div>
		<% }); %>
	</script>
	<script type="text/javascript"> 
		var categorys;
		$.ajax({
			url : "http://ndapi.bestinfoods.com/item/get/topsimplecategorys",
			type : "GET",
			dataType : "JSON",
			success : function(data){
				categorys = data.data.categorys;
				var testData = _.template($("#testTpl").html(),categorys);
				$("#test").html(testData);
			}
		})
	</script>

結果顯示以下：