Underscore解析html模板

深入理解Underscore模板函数及其实用技巧

最新推荐文章于 2024-06-09 22:46:56 发布

weixin_33696106

最新推荐文章于 2024-06-09 22:46:56 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/cangy/blog/346970

本文详细介绍了Underscore库中的.template模板函数及其三种主要标签的用途和工作原理，包括如何在渲染数据时使用Js代码、输出数据、避免XSS攻击等，并展示了如何修改标签形式以解决与其他模板语言的冲突。通过实例代码，读者能够掌握在实际项目中灵活运用这些功能的方法。

为什么80%的码农都做不了架构师？>>>

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

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

<%= %>：用于输出数据，可以是一个变量、对象的属性、或函数（输出函数的返回值）。

<%- %>：用于输出数据，同时会将数据中包含的HTML字符转换为实体形式（例如它会将双引号转换为"形式），用于避免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));

转载于:https://my.oschina.net/cangy/blog/346970