使用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>
           

結果顯示如下：

版權聲明：本文為CSDN部落客「weixin_33727510」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。

原文連結：https://blog.csdn.net/weixin_33727510/article/details/92619086