`
lixuanbin
  • 浏览: 136045 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

EJS: 基于JavaScript的模板引擎

JavaScriptEJS模板引擎 
阅读更多

   最近所在的项目页面使用纯静态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

 

   四、参考资料

   官方页面:

http://www.embeddedjs.com/

   还有一个服务端nodejs的版本（需科学上网）：
http://ejs.co/

 

  • 大小: 14.2 KB
分享到：
| Install VBox Guest Addons And Auto Mount ...
评论
1 楼 lixuanbin 2015-10-10  
后来查找了下，有不少其他js模板引擎可选：
http://developer.51cto.com/art/201405/438849.htm
有些讲解js实现模板引擎的文章也是不错的：
http://www.liaoxuefeng.com/article/001426512790239f83bfb47b1134b63b09a57548d06e5c5000
http://www.cnblogs.com/hustskyking/p/principle-of-javascript-template.html
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics