ejs渲染页面

介绍

官网地址
ejs下载地址，注意下载ejs.min.js文件。

作用

渲染页面。

示例

下载完成之后，直接在静态html文件当中引入这个js文件，这样就可以使用了。

<script src="ejs.min.js"></script>

<script src="ejs.min.js"></script>
<div id="box"></div>
<script type="text/javascript">
   var people = ['geddy', 'neil', 'alex'],
	html = ejs.render('<%= people.join(", "); %>', {people: people});
	var box = document.getElementById("box");
	box.innerHTML = html;
</script>

浏览器打开显示：geddy, neil, alex

两种渲染方式

1. 方式一：

这种方式把渲染的内容得用引号包裹起来，不太灵活。

<div id="container"></div>
var container = document.getElementById("container");
var arr = [
{"name":"《山居笔记》","author":"余秋雨","press":"北京师范大学出版社"},
{"name":"《文化苦旅》","author":"余秋雨","press":"香港中文大学出版社"},
{"name":"《借我一生》","author":"余秋雨","press":"明报出版社"},
{"name":"《摩挲大地》","author":"余秋雨","press":"人民日报出版社"},
];
var text = ejs.render("" +
    "<% for(var i = 0;i<arr.length;i++){%>" +
        "<div>"+
          "<span><%= arr[i].name%></span>&nbsp;&nbsp;&nbsp;"+
          "<span><%= arr[i].author%></span>&nbsp;&nbsp;&nbsp;"+
          "<span><%= arr[i].press%></span>&nbsp;&nbsp;&nbsp;"+
        "</div>"+
    "<%}%>",{arr:arr});
container.innerHTML = text;

2. 方式二：

<div id="container"></div>//html内容
//渲染的模版
<script type="text/template" id="template">
    <div>
        <% for(var i = 0;i<arr.length;i++){ %>
        <span><%= arr[i].name%></span>&nbsp;&nbsp;&nbsp;
        <span><%= arr[i].author%></span>&nbsp;&nbsp;&nbsp;
        <span><%= arr[i].press%></span>&nbsp;&nbsp;&nbsp;
        <br/>
        <% } %>
    </div>
</script>
<script type="text/javascript">
	var container = document.getElementById("container");
	//获取上面id为template的script渲染模版中的内容
	var template = document.getElementById("template");
var arr = [
{"name":"《山居笔记》","author":"余秋雨","press":"北京师范大学出版社"},
{"name":"《文化苦旅》","author":"余秋雨","press":"香港中文大学出版社"},
{"name":"《借我一生》","author":"余秋雨","press":"明报出版社"},
{"name":"《摩挲大地》","author":"余秋雨","press":"人民日报出版社"},
];
	var text =template.innerHTML;
	var html = ejs.render(text, {"arr":arr});//渲染数据
	container.innerHTML = html;//添加到container的div元素中
<script>

实现效果和上面图片一样。