node.js开发笔记之EXPRESS与EJS之ejs标签v20140329

本次记录下ejs的渲染标签

node既然是javascrip的，那么很多在前端执行代码的方式都可以放在后台从而达到无缝连接！

比如

var ygxx = function(){
document.getElementById("xm").innerHTML = '姓名：'+jyh.XM+'('+jyh.DS+')';
document.getElementById("sszd").innerHTML = '所属站点：'+jyh.SSZD;
document.getElementById("zw").innerHTML = '职务：'+jyh.ZW;
document.getElementById("lspgbh").innerHTML = '编号：'+bh.PGBH;
};

这个代码在以往，我的处理方式就是把HTML页面里生成一个 var jyh = {};的对象载入页面之后自动渲染

有了node就不需要这样了，完全可以在后台做

当然这里主要配合express和ejs

网上收入的ejs标签介绍：

ejs 的标签系统非常简单，它只有以下3种标签。

`1`	`<% code %>：JavaScript 代码。`

`2`	`<%= code %>：显示替换过 HTML 特殊字符的内容。`

`3`	`<%- code %>：显示原始 HTML 内容。`

注意： <%= code %> 和 <%- code %> 的区别，当变量 code 为字符串时，两者没有区别；当 code 为比如<h1>hello</h1> 时，<%= code %> 会原样输出 <h1>hello</h1>，而 <%- code %> 则会输出H1大的 hello。

EJS 的官方示例：

The Data

`1`	`{ title:` `'Cleaning Supplies',`

`2`	`supplies: ['mop',` `'broom',` `'duster'] }`

The Template

1 <ul>

`2`	`<%` `for(var i=0; i<supplies.length; i++) {%>`

`3`	`<li><%= supplies[i] %></li>`

4 <% } %>

5 </ul>

The Result

mop
broom
duster

我们可以用上述三种方式实现页面模板系统能实现的任何内容。

由此可以得出一个信息，ejs允许后台定义一个对象，然后前台模版用标签来实现调用对象

比如：

该文件为express的路由文件

exports.index = function(req, res){
res.render('index', {
code:{"GH":"1101","XM":"带头大哥","DS":"329","SSZD":"中国站","ZW":"管理员"}

});
};

后台定义一个对象，然后

前台模版

var ygxx = function(){
alert('AAA');
document.getElementById("xm").innerHTML = '姓名：<%= code.XM %>(<%= code.GH %>)';
document.getElementById("sszd").innerHTML = '所属站点：<%= code.SSZD %>';
document.getElementById("zw").innerHTML = '职务：<%= code.ZW %>';
};

如此这般就可以实现对象的调用，实际现实效果就是

姓名：带头大哥(1101)
所属站点：中国站
职务：管理员

另外还需要一个方式比如

前台有对象

var json = {}; 为了动态加入标签

var json = <%= code %>;

这里如果后台

exports.index = function(req, res){
res.render('index', {
code:'{"GH":"1101","XM":"带头大哥","DS":"329","SSZD":"中国站","ZW":"管理员"}'

});
};

后台渲染字符串，用<%= >标签会报乱码！！

应该用-号

var json = <%- code %>;

这样就可以了！

巴特西

node.js开发笔记之EXPRESS与EJS之ejs标签v20140329

最新文章

热门文章