art-template

art-template

输出

标准语法

{{value}}
{{data.key}}
{{data['key']}}
{{a ? b : c}}
{{a || b}}
{{a + b}}

原始语法

<%= value %>
<%= data.key %>
<%= data['key'] %>
<%= a ? b : c %>
<%= a || b %>
<%= a + b %>

基本案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
    <h2>{{ name }}</h2>
    {{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
    let data = {
        name: '姓名',
    };
    let html = template('user-tpl', data);
    document.getElementById('user-cont').innerHTML = html;
</script>
</html>

原文输出

原文输出语句不会对 HTML 内容进行转义处理，可能存在安全风险，请谨慎使用。

标准语法

{{@ value }}

原始语法

<%- value %>

基本案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
    {{if user.is_show}}
    <h2>{{@ user.name }}</h2>
    {{each user.child}}
        <p>孩子{{$index + 1}}:{{$value}}</p>
    {{/each}}
    {{/if}}
    {{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
    let data = {
        user: {
            is_show: true,
            name: '<span style="color:red;">张三</span>',
            child: ['大毛','二毛','三毛']
        }
    };
    let html = template('user-tpl', data);
    document.getElementById('user-cont').innerHTML = html;
</script>
</html>

条件判断

标准语法

{{if value}} ... {{/if}}
{{if v1}} ... {{else if v2}} ... {{/if}}

原始语法

<% if (value) { %> ... <% } %>
<% if (v1) { %> ... <% } else if (v2) { %> ... <% } %>

基本案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
    {{if user.is_show}}
    <h2>{{ user.name }}</h2>
    {{/if}}
    {{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
    let data = {
        user: {
            name: '姓名',
            is_show: false,
        }

    };
    let html = template('user-tpl', data);
    document.getElementById('user-cont').innerHTML = html;
</script>
</html>

循环

标准语法

{{each target}}
    {{$index}} {{$value}}
{{/each}}

原始语法

<% for(var i = 0; i < target.length; i++){ %>
    <%= i %> <%= target[i] %>
<% } %>

基本案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
    {{if user.is_show}}
    <h2>{{ user.name }}</h2>
    {{each user.child}}
        <p>孩子{{$index + 1}}:{{$value}}</p>
    {{/each}}
    {{/if}}
    {{$data}}
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
    let data = {
        user: {
            is_show: true,
            name: '张三',
            child: ['大毛','二毛','三毛']
        }

    };
    let html = template('user-tpl', data);
    document.getElementById('user-cont').innerHTML = html;
</script>
</html>

赋值

标准语法

{{set temp = data.sub.content}}

原始语法

<% var temp = data.sub.content; %>

基本案例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试art-template</title>
</head>
<body>
<div id="user-cont"></div>
<script id="user-tpl" type="text/html">
    {{set date = '2019-03-18'}}
    <p>日期:{{date}}</p>
</script>
</body>
<script src="./lib/template-web.js"></script>
<script>
    let html = template('user-tpl',{});
    document.getElementById('user-cont').innerHTML = html;
</script>
</html>