ejs 模板类似于 jsp ,可以在模板里面根据变量动态生成网页。

1.1.1. <%= %> 原样显示

resp.render('ejs_temp', {
    user: {
        input: "<div>ABC</div>",
    }
});
<div><%= user.input %></div>

渲染结果

<div>ABC</div>

1.1.2. <%- %> 转换内容

resp.render('ejs_temp', {
    name: "<div>ABC</div>",
});
<div><%- name %></div>

渲染结果

ABC

1.1.3. 定义class

<style>
    .class1 {
        color: #00b7ff;
    }

    .class2 {
        background-color: #abef98;
    }
</style>
<div class="<%= "class1" %> <%= "class2" %>">Class1 Class2</div>

1.1.4. 定义href

<a href=<%= "/users/edit/" + user.id %> >修改</a>

1.1.5. 定义方法

resp.render('ejs_temp', {
    user: {
        name: "ABC",
        age: 25,
    }
});
<script>
    function clickMe(arg1, arg2) {
        console.log(arg1);
        console.log(arg2);
    }
</script>
<div onclick="clickMe(<%= "'" + user.name + "', " + user.age %>)">Click Me</div>

1.1.6. include

有两种写法,可以写被 include 的模板文件的扩展名,也可以不写。

<% include ejs_layout.ejs %>
<% include ejs_layout %>

ejs_include.ejs

<div><%= user.name %></div>

ejs_layout.js

<% include ejs_include.ejs %>

渲染

resp.render('ejs_layout', {
    user: {
        name: "ABC",
        age: 25,
    }
});

1.1.7. config

在模板文件中,可以访问到 app.locals 变量。

  • config.js
var cfg = {
    version : '1.0.1',
    url : "http://www.xx.com",
};

module.exports = route;
  • 设置locals
var cfg = require('./routes/config');
app.locals = cfg;
  • 渲染内容
<div><%= version %></div>

1.1.8. 循环

<ul>
    <% names.forEach(function(name){ %>
        <li><%= name %></li>
    <% }) %>
</ul>
resp.render('ejs_temp', {
    user: {
        name: ["ABC", "XYZ"],
    }
});

results matching ""

    No results matching ""