我正在学习javascript作为服务器端语言和函数式语言的新用法。前几天我听说了node.js和express framework。然后我看到了underscore.js作为一组实用函数。我在stackoverflow上看到了这个问题 . 它说我们可以使用underscore.js作为模板引擎。有人知道关于如何使用underscore.js来做模板的教程吗,特别是对于那些对高级javascript缺乏经验的大程序员。谢谢
当前回答
最简单的形式是这样的:
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>');
其他回答
用快递就很简单了。你所需要的是在节点上使用巩固模块,所以你需要安装它:
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件事:
<% %> -执行一些代码 <%= %> -打印模板中的某些值 <%- %> -打印HTML转义的一些值
就是这样。
简单的例子:
var tpl = _.template("<h1>Some text: <%= foo %></h1>");
那么tpl({foo: "blahblah"})将被渲染为字符串<h1>一些文本:blahblah</h1>
我举了一个非常简单的例子
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}));
});
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
我想分享一个更重要的发现。
使用<%= variable =>会导致跨站脚本漏洞。所以使用<%- variable ->更安全。
我们必须将<%=替换为<%-以防止跨站点脚本攻击。不确定,这是否会对性能有影响
推荐文章
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 如何通过history. pushstate获得历史变化的通知?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 使用jQuery以像素为整数填充或边距值
- 检查是否选择了jQuery选项,如果没有选择默认值
- Next.js React应用中没有定义Window
- 如何重置笑话模拟函数调用计数之前,每次测试
- 如何强制一个功能React组件渲染?
- 错误:无法找到模块“webpack”
- 在javascript中从平面数组构建树数组
- 将Dropzone.js与其他字段集成到现有的HTML表单中
- 如何在AngularJS中观察路由变化?
- JavaScript DOM删除元素