我正在尝试学习javascript作为服务器端语言和功能性语言的新用法。几天前,我听说了node.js和express框架。然后我看到了underscore.js作为一组实用程序功能。我在stackoverflow上看到了这个问题 。它说我们可以使用underscore.js作为模板引擎。任何人都知道如何使用underscore.js进行模板制作的好教程,特别是对于那些对高级javascript经验较少的biginner而言。谢谢
我正在尝试学习javascript作为服务器端语言和功能性语言的新用法。几天前,我听说了node.js和express框架。然后我看到了underscore.js作为一组实用程序功能。我在stackoverflow上看到了这个问题 。它说我们可以使用underscore.js作为模板引擎。任何人都知道如何使用underscore.js进行模板制作的好教程,特别是对于那些对高级javascript经验较少的biginner而言。谢谢
Answers:
您需要了解有关下划线模板的所有信息。仅需记住三件事:
<% %>
-执行一些代码<%= %>
-在模板中打印一些值<%- %>
-打印一些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>
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个参数:
如果未提供任何数据(或null),则将返回渲染函数。它有1个参数:
设置中有3种正则表达式模式和1种静态参数:
评估部分中的代码将被简单地评估。您可以使用__p + =“ mystring”命令将本节中的字符串添加到评估的模板中,但是不建议这样做(不是模板接口的一部分),请使用插值部分代替。这种类型的部分用于向模板中添加诸如if或for之类的块。
插值部分中的代码结果将添加到评估的模板中。如果返回null,则将添加空字符串。
该逃逸部分逃脱HTML与_.escape在给定的代码的返回值。因此,它的比类似_.escape(代码)中的内插部分,但它与逃逸\的空白字符等\ n它传递的代码到前_.escape。我不知道为什么这很重要,它在代码中,但是它与插值和_.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
通过模板加载,您有很多选择,但是最后,您始终必须将模板转换为字符串。你可以把它作为像例如正常的字符串以上,或者你可以从一个脚本标签加载它,使用的.html()的jQuery的功能,也可以从与一个单独的文件中加载第三方物流插件的require.js。
使用简单的模板而不是模板来构建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}));
});
用快递很简单。您需要做的就是在节点上使用整合模块,因此需要安装它:
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
希望对您有所帮助!
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