如何使用underscore.js作为模板引擎？

我想分享一个更重要的发现。

使用<％= variable =>将导致跨站点脚本漏洞。因此，使用<％-variable->代替更为安全。

我们必须用<％-替换<％=，以防止跨站点脚本攻击。不确定，这是否会对性能产生影响

我举一个非常简单的例子

1）

var data = {site:"mysite",name:"john",age:25};
var template = "Welcome you are at <%=site %>.This has been created by <%=name %> whose age is <%=age%>";
var parsedTemplate = _.template(template,data);
console.log(parsedTemplate); 

结果将是

Welcome you are at mysite.This has been created by john whose age is 25.

2）这是一个模板

   <script type="text/template" id="template_1">
       <% _.each(items,function(item,key,arr) { %>
          <li>
             <span><%= key %></span>
             <span><%= item.name %></span>
             <span><%= item.type %></span>
           </li>
       <% }); %>
   </script>

这是html

<div>
  <ul id="list_2"></ul>
</div>

这是包含json对象并将模板放入html的javascript代码

   var items = [
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       },
       {
          name:"name1",
          type:"type1"
       } 
   ];
  $(document).ready(function(){
      var template = $("#template_1").html();
      $("#list_2").html(_.template(template,{items:items}));
  });

您需要了解有关下划线模板的所有信息。仅需记住三件事：

1. <% %> -执行一些代码
2. <%= %> -在模板中打印一些值
3. <%- %> -打印一些HTML转义的值

就是这样。

简单的例子：

var tpl = _.template("<h1>Some text: <%= foo %></h1>");

然后tpl({foo: "blahblah"})将呈现为字符串<h1>Some text: blahblah</h1>