文档章节

使用underscore的template自定义模板

卞龙亭
 卞龙亭
发布于 2016/08/10 17:15
字数 257
阅读 110
收藏 0

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>

结果显示如下:

 

© 著作权归作者所有

卞龙亭
粉丝 0
博文 11
码字总数 3842
作品 0
杭州
程序员
私信 提问
Underscore _.template 方法使用详解

https://github.com/hanzichi/underscore-analysis/issues/26 前文 浅谈 Web 中前后端模板引擎的使用 我们简单了解了模板引擎在前后端的应用场景,本文重点深入 Underscore 的模板函数 _.te...

壹峰
2018/12/19
24
0
underscore.js 中的 template 用法

最近看了下 underscore.js ,看到里面有个 template 的方法,小使了一下,感觉挺不错的,觉得能满足我日常工作的需求了,而且使用起来也简单容易,具体用法可以 参考这里 。还有, undersco...

楠木楠
2016/11/03
961
0
underscore 系列之实现一个模板引擎(上)

前言 underscore 提供了模板引擎的功能,举个例子: 感觉好像没有什么强大的地方,再来举个例子: 在 HTML 文件中: JavaScript 文件中: 效果为: 那么该如何实现这样一个 _.template 函数呢...

2017/12/20
0
0
virtuecai/jquery.underscore.render

jquery.underscore.render jQuery Plugin Demo & Examples https://virtuecai.github.io/jquery.underscore.render/ Example Usage HTML {%= name %} {%= age %}......

virtuecai
2016/08/04
0
0
underscore 系列之实现一个模板引擎(下)

前言 本篇接着上篇 underscore 系列之实现一个模板引擎(上)。 鉴于本篇涉及的知识点太多,我们先来介绍下会用到的知识点。 反斜杠的作用 我们的本意是想打印带 包裹的 字符串,但是在 JavaSc...

冴羽
2018/01/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 2 实战:使用 Spring Boot Admin 监控你的应用

1. 前言 生产上对 Web 应用 的监控是十分必要的。我们可以近乎实时来对应用的健康、性能等其他指标进行监控来及时应对一些突发情况。避免一些故障的发生。对于 Spring Boot 应用来说我们可以...

码农小胖哥
35分钟前
3
0
ZetCode 教程翻译计划正式启动 | ApacheCN

原文:ZetCode 协议:CC BY-NC-SA 4.0 欢迎任何人参与和完善:一个人可以走的很快,但是一群人却可以走的更远。 ApacheCN 学习资源 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 ...

ApacheCN_飞龙
46分钟前
4
0
CSS定位

CSS定位 relative相对定位 absolute绝对定位 fixed和sticky及zIndex relative相对定位 position特性:css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则...

studywin
54分钟前
6
0
从零基础到拿到网易Java实习offer,我做对了哪些事

作为一个非科班小白,我在读研期间基本是自学Java,从一开始几乎零基础,只有一点点数据结构和Java方面的基础,到最终获得网易游戏的Java实习offer,我大概用了半年左右的时间。本文将会讲到...

Java技术江湖
昨天
5
0
程序性能checklist

程序性能checklist

Moks角木
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部