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

我试图了解JavaScript的新用法作为服务器端语言和function语言。 几天前我听说过node.js和expression框架。 然后我看到关于underscore.js作为一组实用函数。 我在stackoverflow上看到了这个问题 。 它说我们可以使用underscore.js作为模板引擎。 任何人都知道关于如何使用underscore.js进行模板的很好的教程,特别是对于那些对高级javascript没有经验的biginners。 谢谢

你需要知道的关于下划线模板的一切都在这里 。 只有三件事要记住:

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

这就是它。

简单的例子:

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

那么tpl({foo: "blahblah"})将被呈现给string<h1>Some text: blahblah</h1>

 <!-- Install jQuery and underscore --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script> <!-- Create your template --> <script type="foo/bar" id='usageList'> <table cellspacing='0' cellpadding='0' border='1' > <thead> <tr> <th>Id</th> <th>Name</th> </tr> </thead> <tbody> <% // repeat items _.each(items,function(item,key,list){ // create variables var f = item.name.split("").shift().toLowerCase(); %> <tr> <!-- use variables --> <td><%= key %></td> <td class="<%= f %>"> <!-- use %- to inject un-sanitized user input (see 'Demo of XSS hack') --> <h3><%- item.name %></h3> <p><%- item.interests %></p> </td> </tr> <% }); %> </tbody> </table> </script> <!-- Create your target --> <div id="target"></div> <!-- Write some code to fetch the data and apply template --> <script type="text/javascript"> var items = [ {name:"Alexander", interests:"creating large empires"}, {name:"Edward", interests:"ha.ckers.org <\nBGSOUND SRC=\"javascript:alert('XSS');\">"}, {name:"..."}, {name:"Yolando", interests:"working out"}, {name:"Zachary", interests:"picking flowers for Angela"} ]; var template = $("#usageList").html(); $("#target").html(_.template(template,{items:items})); </script> 
  • JsFiddle谢谢@PHearst!
  • JsFiddle (最新)
  • JsFiddle列表分组的第一个字母(复杂的例子W /图像,函数调用,子模板)叉! 尽情狂欢…
  • 下面是@tarun_telang指出的XSS黑客JsFiddle演示
  • JsFiddle一个非标准的方法来做子模板

最简单的forms就是使用它:

 var html = _.template('<li><%= name %></li>', { name: 'John Smith' }); //html is now '<li>John Smith</li>' 

如果你要使用一个模板几次,你会想编译它,所以它更快:

 var template = _.template('<li><%= name %></li>'); var html = []; for (var key in names) { html += template({ name: names[i] }); } console.log(html.join('')); //Outputs a string of <li> items 

我个人比较喜欢胡须风格的语法。 您可以调整模板标记标记以使用双花括号:

 _.templateSettings.interpolate = /\{\{(.+?)\}\}/g; var template = _.template('<li>{{ name }}</li>'); 

模板的文档是部分的,我看到了源。

_.template函数有3个参数:

  1. string文本 :模板string
  2. 对象数据 :评估数据
  3. 对象设置 :本地设置, _.templateSettings是全局设置对象

如果没有给出的数据 (或null),将会返回一个渲染函数。 它有一个论点:

  1. 对象数据 :与上面的数据相同

在设置中有3个正则expression式模式和1个静态参数:

  1. RegExp 评估 :模板string中的“<%code%>”
  2. RegExp在模板string中插入 :“<%= code%>”
  3. RegExp 转义 :“<% – code%>”
  4. stringvariables :可选,模板string中数据参数的名称

评估部分的代码将被简单评估。 您可以使用__p + =“mystring”命令将此string添加到已评估的模板中,但不build议(不是模板界面的一部分)使用interpolate部分而不是此部分。 这种types的部分是为模板添加如if或for的块。

插值节中的代码结果将被添加到评估的模板中。 如果返回null,则会添加空string。

escape部分在给定代码的返回值上用_.escape转义html。 所以它在内 部分类似于_.escape(代码) ,但是在它将代码传递给_.escape之前,会使用像\ n这样的空白字符进行转义 。 我不知道为什么这么重要,它是在代码中,但是它与插入_.escape – 也不能逃脱空格字符 – 很好地协作

默认情况下, 数据参数通过with(data){…}语句传递,但是这种评估比使用namedvariables评估慢得多。 所以用可变参数命名数据是很好的…

例如:

 var html = _.template( "<pre>The \"<% __p+=_.escape(o.text) %>\" is the same<br />" + "as the \"<%= _.escape(o.text) %>\" and the same<br />" + "as the \"<%- o.text %>\"</pre>", { text: "<b>some text</b> and \n it's a line break" }, { variable: "o" } ); $("body").html(html); 

结果

 The "<b>some text</b> and it's a line break" is the same as the "<b>some text</b> and it's a line break" and the same as the "<b>some text</b> and it's a line break" 

你可以在这里find更多的例子,如何使用模板并覆盖默认设置: http : //underscorejs.org/#template

通过模板加载你有很多select,但最后你总是必须将模板转换成string。 你可以像上面的例子那样以普通string的forms给出它,或者你可以从脚本标记中加载它,并且使用jquery的.html()函数,或者你可以使用require.js的tpl插件从单独的文件中加载它。

另一种select是用简洁而不是模板来构builddom树。

我给出一个非常简单的例子

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

用快递很容易 所有你需要的是使用节点上的合并模块,所以你需要安装它:

 npm install consolidate --save 

那么你应该改变默认引擎为html模板,通过这个:

 app.set('view engine', 'html'); 

注册html扩展的下划线模板引擎:

 app.engine('html', require('consolidate').underscore); 

完成 !

现在加载例如一个名为“index.html”的模板:

 res.render('index', { title : 'my first page'}); 

也许你需要安装下划线模块。

 npm install underscore --save 

我希望这对你有帮助!

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

使用<%= variable =>会导致跨站脚本漏洞。 所以使用<% – variable – >更安全。

我们必须将<%=replace为<% – 以防止跨站脚本攻击。 不知道,这是否会对性能有任何影响

Lodash也是一样首先写一个脚本如下:

 <script type="text/template" id="genTable"> <table cellspacing='0' cellpadding='0' border='1'> <tr> <% for(var prop in users[0]){%> <th><%= prop %> </th> <% }%> </tr> <%_.forEach(users, function(user) { %> <tr> <% for(var prop in user){%> <td><%= user[prop] %> </td> <% }%> </tr> <%})%> </table> 

现在写一些简单的JS如下:

 var arrOfObjects = []; for (var s = 0; s < 10; s++) { var simpleObject = {}; simpleObject.Name = "Name_" + s; simpleObject.Address = "Address_" + s; arrOfObjects[s] = simpleObject; } var theObject = { 'users': arrOfObjects } var compiled = _.template($("#genTable").text()); var sigma = compiled({ 'users': myArr }); $(sigma).appendTo("#popup"); 

popoup是你想要生成表格的地方