文档章节

Underscore解析html模板

藏言
 藏言
发布于 2014/11/20 21:59
字数 246
阅读 195
收藏 0

Underscore 的_.template模板函数只能解析3种模板标签

<%  %>:用于包含Js代码,这些代码将在渲染数据时被执行。

<%= %>:用于输出数据,可以是一个变量、对象的属性、或函数(输出函数的返回值)。

<%- %>:用于输出数据,同时会将数据中包含的HTML字符转换为实体形式(例如它会将双引号转换为&quot;形式),用于避免XSS攻击。

当我们希望将数据中的HTML作为文本显示出来时,可以使用<%- %>标签。

Underscore还允许你修改这3种标签的形式,如果我们想使用{% %}、{%= %}、{%- %}作为标签,可以通过修改templateSettings来实现

_.templateSettings = {      
    evaluate : /\{%([\s\S]+?)\%\}/g,      
    interpolate : /\{%=([\s\S]+?)\%\}/g,     
    escape : /\{%-([\s\S]+?)%\}/g  
}

此方法还可以用于解决和其它模板语言的标签冲突

示例:

模板:

<script type="text/template" id="tpl">
   <div>{%=say%}</div>
</script>

调用代码

var data = {};
data.say = "Hello World!";
$("body").html(_.template($("#tpl").html(),data));









© 著作权归作者所有

藏言
粉丝 6
博文 23
码字总数 4021
作品 1
厦门
程序员
私信 提问
Underscore _.template 方法使用详解

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

壹峰
2018/12/19
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的template自定义模板

underscore的template()是一个十分重要的函数,该函数可以解析3种模板标签,分别如下: template() 函数模板标签 模板标签 功能 <% %> 标签中包含的通常是Javascript代码,在页面渲染数据时执...

卞龙亭
2016/08/10
32
0
underscore 系列之实现一个模板引擎(上)

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

2017/12/20
0
0
探讨webapp的SEO难题(上)

前言 网络蜘蛛无法解析javascript,至少百度是不能的,神马搜索差的更远,而我们的webapp的渲染展示完全由javascript驱动 所以蜘蛛访问webapp页面会得到一个白页面,比如,我们期待SEO看到的...

范大脚脚
2017/10/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

优雅的关闭Spring Boot

优雅的关闭Spring Boot 1、实现 TomcatConnectorCustomizer 接口拿到Tomcat的连接获取 Tomcat连接池 2、实现 ApplicationListener<ContextClosedEvent> 监听服务器关闭事件,注册JVM钩子函数...

sowhat
今天
2
0
Python3-Web开发

简介 Web开发框架 什么是Web框架? Web应用程序框架或简单的Web框架表示一组库和模块,使Web应用程序开发人员能够编写应用程序,而不必担心协议,线程管理等低级细节。 virtualenv是一个虚拟...

wuxinshui
今天
3
0
使用技媒体实践编写发布博客

技媒体实践博客 CSDN OSChina 知乎 简书 思否 掘金 51CTO

晨猫
今天
2
0
Lucene

1、什么是全文检索 数据分类 我们生活中的数据总体分为两种:结构化数据和非结构化数据。 结构化数据:指具有固定格式或有限长度的数据,如数据库,元数据等。 非结构化数据:指不定长或无固...

榴莲黑芝麻糊
昨天
5
0
python到setuptools、pip工具的安装

python安装 基础开发库   apt-get install gcc  apt-get install openssl libssl-dev 安装数据库和开发库   apt-get install mysql-server libmysqld-dev python环境   下载地址...

问题终结者
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部