我正在学习javascript作为服务器端语言和函数式语言的新用法。前几天我听说了node.js和express framework。然后我看到了underscore.js作为一组实用函数。我在stackoverflow上看到了这个问题 . 它说我们可以使用underscore.js作为模板引擎。有人知道关于如何使用underscore.js来做模板的教程吗,特别是对于那些对高级javascript缺乏经验的大程序员。谢谢
当前回答
用快递就很简单了。你所需要的是在节点上使用巩固模块,所以你需要安装它:
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 ->更安全。
我们必须将<%=替换为<%-以防止跨站点脚本攻击。不确定,这是否会对性能有影响
用快递就很简单了。你所需要的是在节点上使用巩固模块,所以你需要安装它:
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
我希望这对你有所帮助!
该文档用于模板的部分,我看了源代码。
_。模板函数有3个参数:
String text:模板字符串 对象数据:评价数据 对象设置:本地设置,_。templateSettings是全局设置对象
如果没有给定数据(或null),则返回一个渲染函数。它有1个参数:
对象数据:同上
在设置中有3个正则表达式模式和1个静态参数:
RegExp: "<%code%>"在模板字符串中 RegExp插值:"<%=code%>"在模板字符串中 RegExp转义:"<%-code%>" 字符串变量:可选,模板字符串中数据参数的名称
求值节中的代码将被简单地求值。你可以使用__p+="mystring"命令将此部分的字符串添加到被评估的模板中,但不建议这样做(不是模板接口的一部分),使用interpolate部分代替。这种类型的section用于向模板中添加if或for之类的块。
插值段中代码的结果将被添加到已计算的模板中。如果返回null,则添加空字符串。
转义节在给定代码的返回值上使用_.escape转义html。因此,它类似于插值节中的_.escape(代码),但它在将代码传递给_.escape之前使用像\n这样的空白字符进行转义。我不知道为什么这很重要,它在代码中,但它与interpolate和_.escape(它也不转义空白字符)一起工作得很好。
默认情况下,data参数由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插件从一个单独的文件加载它。
另一种选择是使用简洁而不是模板来构建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>
这是javascript代码,其中包含json对象和把模板到html
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}));
});
<!-- 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>
谢谢@ phhearst ! JsFiddle(最新) JsFiddle列表分组的第一个字母(复杂的例子w/图像,函数调用,子模板)分叉!玩得开心点…… @tarun_telang注意到XSS黑客的JsFiddle演示 一种做子模板的非标准方法
推荐文章
- 检测用户何时离开网页的最佳方法?
- 当“模糊”事件发生时,我如何才能找到哪个元素的焦点去了*到*?
- 检查已安装的angular-cli版本?
- React不会加载本地图像
- 如何将Blob转换为JavaScript文件
- 在另一个js文件中调用JavaScript函数
- 如何在svg元素中使用z索引?
- 如何求一个数的长度?
- 跨源请求头(CORS)与PHP头
- 如何用Express/Node以编程方式发送404响应?
- parseInt(null, 24) === 23…等等,什么?
- JavaScript变量声明在循环外还是循环内?
- 元素在“for(…in…)”循环中排序
- 在哪里放置JavaScript在HTML文件?
- 如何安装包从github回购在纱线