EJS template language usage


tmt-workflow supports EJS pattern engine, which can save a lot of work in the process of writing HTML, and reduce code through features such as include, for loop number of lines to improve the readability of the code.

We use EJS 2.0 or above: https://github.com/mde/ejs

EJS Features

Output

To output the variable value on the page, you can use this: <div><%= var01 %></div>

If not If you want the content of the variable value to be escaped, use this: <div><%- var02 %></div>

All content enclosed by <% %> will be compiled into Javascript. You can add it to the template file Coding, like writing js, also allows you to declare variables, and the scope is the current template, because a template will be compiled into a Javascript function.

Example:

    <% var name = "littledu" %>    <div>
    Hello, My Name is <%-name %>    </div>

Just like writing Javascript

<ul>
    <% for(var i = 0; i < 10; i++) {%>
    <li>我是列表 <%-i %></li>
    <% } %>
<ul>

Include can reference template files with relative paths. For example, if there are two files:

html/index.html and html/_block/head.html, you can use index. html is used like this <% include _block/head.html %>.

Example

<ul>
    <% users.forEach(function(user){ %>
    <% include user/show %>
    <% }) %>
</ul>

We provide some additional template functions outside of EJS to simplify some of our work.

GIT: https://github.com/willerce/tmt-ejs-helper

Quickly reference CSS files, And attach the CSS absolute path on the comment line to facilitate the use of downstream front-ends. 

<head>
    <title>页面标题</title>
    <%- css("style-workflow.css") %>
</head>

After compilation: 

<head>
    <title>页面标题</title>
    <link rel="stylesheet" href="../../dev/css/style-workflow.css"/>
    <!--<link rel="stylesheet" href="http://wximg.gtimg.com/tmt/workflow/dist/css/style-workflow.css"/>-->
</head>

The function is the same as css(), not repeated

Placement image, you can specify the height, width, and className

<%- img(200, 400, 'block__img') %>

After compilation: 

<img src="http://temp.im/200x400" class="block__img"/>

Generates a placeholder image of a specified length. The second parameter is the number of offset words

For example, the following function may generate a text length of 7 to 13 characters . 

 <span><%- text(10, 3) %></span>

After compilation: 

<span>一二三四五六七八九</span>

←
→