art-template 模板引擎

原创已于 2022-04-19 18:45:06 修改 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-19 18:40:16 首次发布

javascript 专栏收录该内容

21 篇文章

订阅专栏

这篇博客介绍了如何利用template-web.js库结合JavaScript和HTML模板，动态生成DOM元素。通过引入jQuery和template-web.js，定义数据和模板，实现根据条件渲染如年龄判断、爱好列表等功能。同时，展示了如何自定义过滤器来格式化日期。

一、简介

说明：由于用字符串形式手动写入DOM元素，比较麻烦，于是引用模板。

总共提供两个东西：1.数据 2.模板 ps：外加一个js文件

template-web.js ：提供template函数参数为 id, data

注意：在模板时，另用一个script标签，type="text/html"：

1. 引入js文件

<script src="jquery.js"></script>
<script src="template-web.js"></script>

2. 提供数据

<script>
    var data = {
        name:'zhangsan',
        age:18,
        hobby:[
            '足球',
            '篮球',
            '手工'
        ]
    }
</script>

3. 提供模板

<script type="text/html" id="content-template">
    <p>我的名字叫{{name}}</p>
    <p>今年{{age}}岁</p>
    <p>{{if age >= 18}}可以上网{{else if age < 18}}不允许上网{{/if}}</p>
    <p>我的爱好有：</p>
    <ul>
        {{each hobby}}
        <li>{{$index}}：{{$value}}</li>
        {{/each}}
    </ul>
    {{@text}}
</script>

二、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="content"></div>
    <script src="jquery.js"></script>
    <script src="template-web.js"></script>
    <script type="text/html" id="content-template">
        <p>我的名字叫{{name}}</p>
        <p>今年{{age}}岁</p>
        <p>{{if age >= 18}}可以上网{{else if age < 18}}不允许上网{{/if}}</p>
        <p>我的爱好有：</p>
        <ul>
            {{each hobby}}
            <li>{{$index}}：{{$value}}</li>
            {{/each}}
        </ul>
        {{@text}}
        <div>注册时间：{{time|dateFormat}}</div>
    </script>
    <script>
        var data = {
            name:'zhangsan',
            age:18,
            hobby:[
                '足球',
                '篮球',
                '手工'
            ],
            text:'<a href="javascript:;">Happy</a>',
            time:new Date()
        }
        template.defaults.imports.dateFormat = function(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            return y + '-' + m + '-' + d;
        }
        var htmlStr = template("content-template",data);
        $("#content").html(htmlStr);
    </script>
</body>
</html>