如何使用underscore.js作为模板引擎？
我试图了解JavaScript的新用法作为服务器端语言和function语言。 几天前我听说过node.js和expression框架。 然后我看到关于underscore.js作为一组实用函数。 我在stackoverflow上看到了这个问题 。 它说我们可以使用underscore.js作为模板引擎。 任何人都知道关于如何使用underscore.js进行模板的很好的教程，特别是对于那些对高级javascript没有经验的biginners。 谢谢
你需要知道的关于下划线模板的一切都在这里 。 只有三件事要记住：
-
<% %>– 执行一些代码 -
<%= %>– 在模板中打印一些值 -
<%- %>– 打印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个参数：
- string文本 ：模板string
- 对象数据 ：评估数据
- 对象设置 ：本地设置， _.templateSettings是全局设置对象
如果没有给出的数据 （或null），将会返回一个渲染函数。 它有一个论点：
- 对象数据 ：与上面的数据相同
在设置中有3个正则expression式模式和1个静态参数：
- RegExp 评估 ：模板string中的“<％code％>”
- RegExp在模板string中插入 ：“<％= code％>”
- RegExp 转义 ：“<％ – code％>”
- 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是你想要生成表格的地方
