最近所在的项目页面使用纯静态HTML,所有动态内容都通过ajax加载生成,在JS中拼凑HTML片段比较繁琐,有同事推荐使用EJS——一个JS的模板引擎上手简单,使用方便.这里给大家简单介绍一下.
一、场景:
页面提交ajax查询,服务器返回一段json,客户端根据json内容动态生成table展现.
二、EJS用法
1.模板
与jsp的script类似,位于<% %>之间的JavaScript会被解释执行,而<%= %>则会把表达式的值输出到页面.
2.渲染:
html = new EJS({url: '/template.ejs'}).render(data);
或
new EJS({url:'/todo.ejs'}).update('todo','/todo.json');
三、示例
这是我们要实现的table:
接着看看服务器返回的json长啥样:
[{
"2015-09-06": {
"strife": 1,
"longen": 13
},
"2015-09-07": {
"strife": 0,
"longen": 15
},
"total": {
"strife": 1,
"longen": 28
}
}]
页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ejs demo page</title>
<link rel="stylesheet" href="demo.css" type="text/css" />
</head>
<body>
<h3>ejs demo page</h3>
<div id="content">
<input type="button" value="generate table" id="genTableBtn" />
<div id="dataTable"></div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script src="ejs.js"></script>
<script src="demo.js"></script>
</body>
</html>
为便于遍历，我们的json对象需要做些转换：
var transformData = function(data) {
var myObj = {};
var contents = [];
var maps = [];
for (var p in data[0]) {
var content = {};
var contentArray = [];
if (p == 'total') {
content.contentTitle = '总数';
} else {
content.contentTitle = p;
}
for (var pp in data[0][p]) {
contentArray.push(data[0][p][pp]);
}
content.contentArray = contentArray;
contents.push(content);
}
for (var ppp in data[0]['total']) {
maps.push(ppp);
}
myObj.contents = contents;
myObj.maps = maps;
return myObj;
}
接着设计table的模板:
<table>
<thead>
<tr>
<th>日期</th>
<% for(var p in myObj.maps) { %>
<th><%= myObj.maps[p] %></th>
<% } %>
</tr>
</thead>
<tbody>
<% for(var content in myObj.contents) { %>
<tr>
<td>
<div align="center"><%= myObj.contents[content].contentTitle %></div>
</td>
<% for(var item in myObj.contents[content].contentArray) { %>
<td>
<div align="center"><%= myObj.contents[content].contentArray[item] %></div>
</td>
<% } %>
</tr>
<% } %>
</tbody>
</table>
ajax请求json,然后生成table:
$(function() {
var loadTable = function() {
$.ajax({
type: "get",
datatype: "json",
url: "data.js",
success: function(data) {
var myObj = transformData(JSON.parse(data));
var htmlTable = new EJS({
url: 'demo.ejs'
}).render({
myObj: myObj
});
$('#dataTable').html(htmlTable);
decorateTable();
},
error: function(e) {
console.log(e);
}
});
};
var decorateTable = function() {
$("tr:odd").addClass("odd");
$("tr:even").addClass("even");
$("th").addClass("thead");
}
$("#genTableBtn").bind("click", loadTable);
});
以上代码已经放到:
https://github.com/lixuanbin/ejs-demo
四、参考资料
官方页面:
还有一个服务端nodejs的版本（需科学上网）：
http://ejs.co/
相关推荐
JavaScript模板引擎种类繁多，每种都有其独特的特点和适用场景。例如： 1. **Mustache**：这是一种逻辑less的模板引擎，遵循“逻辑不可见”的原则，避免在模板中出现复杂的条件判断和循环。它的语法简洁，跨语言，...
1. EJS：EJS是一种简单易用的JavaScript模板引擎，支持内联表达式和控制流语句，可以在客户端和服务器端运行。 2. Handlebars：Handlebars提供了一种声明式的模板语法，允许开发者定义模板帮助器，便于扩展和复用。 ...
本文将深入探讨一个基于Koa2、Mysql数据库、Ejs模板引擎以及前端Layui模板的管理系统框架。这个框架融合了JavaScript的强大功能，为开发者提供了便捷的开发体验。 首先，Koa2是Node.js的下一代web应用框架，由...
PowJS与其他JavaScript模板引擎（如Handlebars、EJS、Mustache等）相比，其特色在于DOM Tree的直接操作，这可能会提供更快的渲染速度和更好的浏览器兼容性。然而，每个模板引擎都有其适用场景，选择哪种引擎应根据...
"Node.js-一个简单快速类似ejs的node.js的模板引擎"是指一个特定的模板引擎，其设计目标是提供与流行的EJS（Embedded JavaScript）模板引擎相似的功能，但更简洁快速。 EJS是一种常见的用于Node.js的模板引擎，它...
在“javascript-高性能javascript模版引擎-templateEngine.zip”这个压缩包中，我们很显然会发现一个关于创建高效JavaScript模板引擎的资源集合。下面我们将详细探讨JavaScript模板引擎的工作原理、优点、常见实现...
JavaScript模板引擎是一种在JavaScript中处理数据和HTML组合的工具，它的主要目的是将数据逻辑与页面展示分离，提高代码的可维护性和复用性。在Web开发中，它扮演着一个预处理器的角色，允许开发者编写类似于HTML的...
EJS（Embedded JavaScript）是一种轻量级的模板引擎，用于动态生成HTML。它允许在HTML中嵌入JavaScript代码，将数据与视图分离。在Node.js项目中，可以通过以下方式安装并使用EJS： ```bash npm install ejs ``` ...
模板引擎基于JavaScript，主要目的是简化HTML和JavaScript的交互，使得开发者可以使用简单的语法来插入、删除或操作DOM元素。在新一代JavaScript中，模板引擎的实现变得更加优雅和强大。例如，ES6引入的模板字面量...
### Express框架中如何引用ejs模板引擎 #### 一、引言 在Web开发领域，Express 是一个基于 Node.js 的轻量级 Web 应用框架，它提供了强大的功能来构建各种 Web 和移动应用程序。EJS（Embedded JavaScript Templates...
JavaScript（JS）模板引擎是一种在前端开发中广泛使用的工具，它允许开发者将数据和视图逻辑分离，使得HTML模板和JavaScript代码可以独立管理，提高代码的可读性和可维护性。这种技术通常用于动态生成HTML内容，特别...
在本文中，我们将深入探讨如何在Node.js环境中利用EJS模板引擎实现Google身份验证。EJS是一种轻量级的服务器端JavaScript模板库，它允许开发者将动态数据嵌入到HTML中，使得创建交互式Web应用变得更加简单。我们将...
EJS是一种嵌入式JavaScript模板语言，它允许在HTML中嵌入JavaScript代码来动态生成内容。EJS的主要优势在于其简洁的语法和良好的可读性。使用EJS，开发者可以在模板中使用`<% %>`和`<%= %>`语法，前者执行JavaScript...
这是一个基于Node.js、Express框架、MongoDB数据库以及EJS模板引擎构建的简易博客系统的实现示例。这个项目可能是一个毕业设计项目，旨在帮助学生或开发者理解如何将这些技术结合在一起，创建一个基本的Web应用程序...
描述中提到的“Skeleton-Express-Ejs”是专门为结合使用Express.js（一个流行的Node.js web应用框架）和EJS（一个轻量级的嵌入式JavaScript模板引擎）而设计的。Express.js使开发者能够轻松创建功能丰富的web服务器...
1. **模板语法**：绿宝石模板引擎的语法设计简洁直观，类似于其他流行的模板引擎，如Mustache或EJS。例如，它可以使用`{{ }}`来包裹变量，`{% %}`进行控制结构（如条件语句和循环）。 2. **嵌套与部分**：模板可以...
EJS（Embedded JavaScript Templates）是一种轻量级的模板引擎，它允许在HTML中嵌入JavaScript代码来动态生成视图。EJS在客户端渲染页面，将从服务器获取的数据与HTML模板结合，生成最终的HTML响应给用户。在这个...
这个技术栈结合了Angular（一个由Google维护的前端JavaScript框架）与Node.js（一个基于Chrome V8引擎的JavaScript运行环境）以及EJS（一个轻量级的服务器端JavaScript模板引擎）。本教程将带你了解如何利用这些工具...
【标题】"discover-node-ejs:火箭座->发现-> Curso Node + EJS" 提供的信息表明，这是一个关于学习Node.js和EJS模板引擎的课程。Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它让开发者能够在服务器端使用...