天天看点

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

结果显示如下:

使用underscore的template自定义模板

版权声明:本文为CSDN博主「weixin_33727510」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/weixin_33727510/article/details/92619086