我正在尝试了解 javascript 作为服务器端语言和函数式语言的新用法。几天前我听说了 node.js 和 express 框架。然后我看到了 underscore.js 作为一组实用函数。我看到了this question on stackoverflow 。它说我们可以使用 underscore.js 作为模板引擎。任何人都知道关于如何使用 underscore.js 进行模板的很好的教程,尤其是对于那些对高级 javascript 经验较少的大佬来说。谢谢
您需要了解的关于下划线模板的所有内容都是 here。只需要记住 3 件事:
<% %> - 执行一些代码 <%= %> - 在模板中打印一些值 <%- %> - 打印一些 HTML 转义的值
这就是全部。
简单的例子:
var tpl = _.template("<h1>Some text: <%= foo %></h1>");
那么 tpl({foo: "blahblah"})
将被呈现为字符串 <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 列表(带有图像、函数调用、子模板的复杂示例) fork it!尽情狂欢...
下面@tarun_telang 指出的 XSS hack 的 JsFiddle 演示
JsFiddle 做子模板的一种非标准方法
text/html
,所以说 type="text/html"
是谎言,谎言会导致问题。最好使用准确的类型,例如 text/x-underscore
。
type="foo/bar"
因为我希望每个人都知道只要浏览器/服务器不识别它就没有关系它并尝试用它做点什么。由于 html 不是一种脚本,我觉得 text/html 相当安全(John Resig 使用它) foo/bar 也可以:)
*/x-*
类型以供“虚构”使用,我认为官方注册表中没有 text/underscore
类型,所以我使用 text/x-underscore
因为我很偏执,他们真的很想得到我。
以最简单的形式,您可以像这样使用它:
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
我个人更喜欢 Mustache 风格的语法。您可以调整模板标记标记以使用双花括号:
_.templateSettings.interpolate = /\{\{(.+?)\}\}/g;
var template = _.template('<li>{{ name }}</li>');
interpolate
提示无效,但确实有效:_.templateSettings = { interpolate: /\{\{\=(.+?)\}\}/g, escape: /\{\{\-(.+?)\}\}/g, evaluate: /\{\{(.+?)\}\}/g };
模板的文档是部分的,我看了源代码。
_.template 函数有 3 个参数:
String text :模板字符串 Object data :评估数据 Object settings :本地设置,_.templateSettings 是全局设置对象
如果没有给出数据(或 null),则将返回渲染函数。它有 1 个参数:
对象数据:与上面的数据相同
设置中有 3 个正则表达式模式和 1 个静态参数:
正则表达式评估:模板字符串中的“<%code%>”正则表达式插值:模板字符串中的“<%=code%>”正则表达式转义:“<%-code%>”字符串变量:可选,数据参数的名称在模板字符串
评估部分中的代码将被简单地评估。您可以使用 __p+="mystring" 命令将此部分中的字符串添加到评估的模板,但不建议这样做(不是模板接口的一部分),请使用 interpolate 部分代替。这种类型的部分用于将 if 或 for 等块添加到模板中。
插值部分中的代码结果将添加到评估的模板中。如果返回 null,则将添加空字符串。
转义部分在给定代码的返回值上使用 _.escape 转义 html。因此,它类似于插值部分中的 _.escape(code),但在将代码传递给 _.escape 之前,它会使用 \ 和 \n 等空白字符进行转义。我不知道为什么这很重要,它在代码中,但它与 interpolate 和 _.escape 配合得很好 - 它也不会转义空白字符。
默认情况下,数据参数由 with(data){...} 语句传递,但这种评估比使用命名变量的评估慢得多。所以用可变参数命名数据是一件好事......
例如:
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"
您可以在此处找到如何使用模板和覆盖默认设置的更多示例:http://underscorejs.org/#template
通过模板加载,您有很多选择,但最后您总是必须将模板转换为字符串。您可以像上面的示例一样将其作为普通字符串提供,或者您可以从脚本标签加载它,并使用 jquery 的 .html() 函数,或者您可以使用 require.js 的 tpl plugin 从单独的文件加载它.
使用 laconic 而不是模板构建 dom 树的另一种选择。
我举一个非常简单的例子
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}));
});
用快递就这么简单。您只需要在节点上使用 consolidate 模块,因此您需要安装它:
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 -> 更安全。
我们必须将 <%= 替换为 <%- 以防止跨站点脚本攻击。不确定,这是否会对性能产生任何影响
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 是要在其中生成表格的 div
不定期副业成功案例分享