EJS hello world

Posted on Edited on In Views: Disqus:

 

一、範例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://cdn.jsdelivr.net/npm/ejs@3.1.5/ejs.min.js"></script>
</head>

<body>
    <div id="show">
    </div>

    <script>
        var people = ['geddy', 'neil', 'alex'];

        var template = "";
        template += "<% for(let i = 0; i< people.length; i++){ %>";
        template += "    <p><%= people[i] %></p>";
        template += "<% } %>";

        var html = ejs.render(template, { people: people });

        document.getElementsByTagName("body")[0].innerHTML = html;
    </script>

</body>

</html>

結果畫面：

說明：

1、ejs 提供 render 方法，語法為 ejs.render(string template, data);

template 為模版 html，data 為輸入物件。

 

二、語法

1、<% context %>：context 裡面是專門用來放置 javascript 語法。

2、<%= context %>：context 內容為 data 輸入物件，如果內容字串含有 html 語法時，將會被轉譯。

3、<%- context %>：context 內容為 data 輸入物件，如果內容字串含有 html 語法時，將不會被轉譯。

4、<%- include('path'); %>：用來引入另一個模版檔案，例如你有一個模版檔案路徑為

user/show.ejs

則 include 語法將為 <%- include('user/show'); %>

 

參考資料：

Embedded JavaScript templates