这节将会是模板引擎的第二部分,由于重感冒的原因,各位请见谅我的声音变化(译者觉得还挺 sexy,aha),目前正在恢复中,但课程还是需要继续。
上节课我们创建了一个 profile 的模板视图并嵌入数据到视图当中。
这节课将介绍一些在视图上能使用的高级技巧,不仅仅只是在视图上输出数据,还可以使用 Javascript
代码进行流程控制等。
这节课我们将传递更多数据到视图里,并循环里面的数据然后输出:
- 首先我们传递数组到视图模板中
'app.js'
var express = require('express');
var app = express();
app.get('/profile/:name', function(req, resp){
var data = {
hobbie: ['eating', 'fighting', 'fishing',] // 数组数据
}
resp.render('profile.ejs', {
data: data
});
});
- ejs 里使用流程控制语句遍历数组并输出,跟 ejs 里输出的语法很相像
<% %>
就是不需要=
-
<% data.hobbie.forEach(function(item)){%>
这是循环的语法 - 下一行起放 HTML 标签,并输出模板引擎传递过来的参数
- 最后结束循环语法
<% });%>
-
‘profile.ejs’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
</head>
<body>
<ul>
<% data.hobbie.forEach(function(item)){%>
<li><%= item %></li>
<% });%>
</ul>
</body>
</html>
网友评论