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

JavaScript Node.js

神无宝儿

2020-03-20

我正在尝试学习javascript作为服务器端语言和功能性语言的新用法。几天前,我听说了node.js和express框架。然后我看到了underscore.js作为一组实用程序功能。在stackoverflow上看到了这个问题 它说我们可以使用underscore.js作为模板引擎。任何人都知道有关如何使用underscore.js进行模板制作的很好的教程,尤其是对于那些对高级javascript经验较少的biginner而言。谢谢

第2443篇《如何使用underscore.js作为模板引擎?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
樱泡芙 2020.03.20

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

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

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

古一西里 2020.03.20

我举一个非常简单的例子

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}));
  });

猿前端前端 2020.03.20

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

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

就是这样。

简单的例子:

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android